css文件分類

1、公共型：標簽重置、默認設置、通用樣式

2、特殊型：特殊布局、特殊模塊、特殊皮膚

css文件引用順序

1、公共

2、主體

3、皮膚及其他模塊

常用文件名

master.css or index.css or main.css 主要的

module.css 模塊

base.css or global.css 基本公用

layout.css 布局

themes.css 主題

skin.css 換膚

column.css 欄目

font.css 文本、字體

forms.css 表單

mend.css 補丁

print.css 打印

css內部引用順序

1、樣式重置和主體樣式

2、統一的背景和字體、功能型樣式clearfix

3、布局(grid) (.g-)：頭部、主體、主欄、側欄、尾部等

4、模塊(module) (.m-)：導航、登錄、註冊、列表、評論、搜索

5、元件(unit) (.u-)：按鈕、輸入框、圖標

6、功能(function) (.f-)：特殊用途css，如隱藏元素

7、皮膚(skin) (.s-)：文字顏色、背景、邊框

8、狀態(.z-)：只能組合使用或作為後代元素

css命名規範

1、所有命名全部小寫且用英文命名

2、顏色值和字符集大寫

2、分類命名，如：.g-

3、使用縮寫，如：nav、btn

4、使用class命名，確定不復用的樣式用id命名

5、使用語義的命名，不使用單個字母命名

6、使用-或者_連接命名，如：header-banner、header_banner

常用命名

布局(.g-)

文檔 document doc

頭部 head hd

主體 body bd

尾部 foot ft

主欄 main mn

主欄容器 maincontains mnc

側欄 side sd

側欄容器 sidecontains sdc

盒容器 wrap wp

模塊(.m-)、元件(.u-)

導航 navigator nav

子導航 subnavigator snav

面包屑 crumb crm

菜單 menu

選項卡 tab

標題區 head/title hd/tt

內容區 body/content bd/ct

列表 list

表格 table tb

表單 form fm

熱點 hot

排行 top

登錄 login

標誌 logo

廣告 banner

搜索 search

幻燈 slide

提示 tips

幫助 help

新聞 news

下載 download

註冊 register

投票 vote

版權 copyright

結果 result

標題 title

按鈕 button btn

輸入 input ipt

功能(.f-)

浮動清除 clearfix cf

向左浮動 floatleft fl

向右浮動 floatright fr

內聯塊級 inlineblock ib

文本居中 textaligncenter tac

文本居右 textalignright tar

文本居左 textalignleft tal

垂直居中 verticalalignmiddle vam

溢出隱藏 overflowhidden oh

完全消失 displaynone dn

字體大小 fontsize fs

字體粗細 fontweight fw

皮膚(.s-)

字體顏色 fontcolor fc

背景 background bg

背景顏色 backgroundcolor bgc

背景圖片 backgroundimage bgi

背景定位 backgroundposition bgp

邊框顏色 bordercolor bdc

狀態(.z-)

選中 selected sel

當前 current crt

顯示 show

隱藏 hide

打開 open

關閉 close

出錯 error err

不可用 disabled dis

css - 命名規範