一、文件規(guī)范

1、文件均歸檔至約定的目錄中。

具體要求通過豆瓣的CSS規(guī)范進(jìn)行講解：

所有的CSS分為兩大類：通用類和業(yè)務(wù)類。通用的CSS文件，放在如下目錄中：

• 基本樣式庫 /css/core 

• 通用UI元素樣式庫 /css/lib 

• JS組件相關(guān)樣式庫 /css/ui 

業(yè)務(wù)類的CSS是指和具體產(chǎn)品相關(guān)的文件，放在如下目錄中：

• 讀書 /css/book/ 

• 電影 /css/movie/ 

• 音樂 /css/music/ 

• 社區(qū) /css/sns/ 

• 小站 /css/site/ 

• 同城 /css/location/ 

• 電臺 /css/radio/ 

外聯(lián)CSS文件適用于全站級和產(chǎn)品級通用的大文件。內(nèi)聯(lián)CSS文件適用于在一個或幾個頁面共用的CSS。另外一對具體的CSS進(jìn)行文檔化的整理。如：

• util-01 reset /css/core/reset.css 

• util-02 通用模塊容器 /css/core/mod.css 

• ui-01. 喜歡按鈕 /css/core/fav_btn.css 

• ui-02. 視頻/相冊列表項(xiàng) /css/core/media_item.css 

• ui-03. 評星 /css/core/rating.css 

• ui-04. 通用按鈕 /css/core/common_button.css 

• ui-05. 分頁 /css/core/pagination.css 

• ui-06. 推薦按鈕 /css/core/rec_btn.css 

• ui-07. 老版對話框 /css/core/old_dialog.css 

• ui-08. 老版Tab /css/core/old_tab.css 

• ui-09. 老版成員列表 /css/core/old_userlist.css 

• ui-10. 老版信息區(qū) /css/core/notify.css 

• ui-11. 社區(qū)用戶導(dǎo)航 /css/core/profile_nav.css 

• ui-12. 當(dāng)前大社區(qū)導(dǎo)航 /css/core/site_nav.css 

• ui-13. 加載中 /css/lib/loading.css 

2、文件引入可通過外聯(lián)或內(nèi)聯(lián)方式引入。

• 外聯(lián)方式：（類型聲明type=”text/css”可以省略） 

• 內(nèi)聯(lián)方式：（類型聲明type=”text/css”可以省略） 

• link和style標(biāo)簽都應(yīng)該放入head中，原則上，不允許在html上直接寫樣式。避免在CSS中使用@import，嵌套不要超過一層。

3、文件名、文件編碼及文件大小

• 文件名必須由小寫字母、數(shù)字、中劃線組成 

• 文件必須用UTF-8編碼，使用UTF-8（非BOM），在HTML中指定UTF-8編碼，在CSS中則不需要特別指定因?yàn)槟J(rèn)就是UTF-8。 

• 單個CSS文件避免過大（建議少于300行） 

二、注釋規(guī)范

1、文件頂部注釋（推薦使用）

/* * @description: 中文說明 * @author: name * @update: name (2013-04-13 18:32) */ 

2、模塊注釋

/* module: module1 by 張三 */ … /* module: module2 by 張三 */ 

模塊注釋必須單獨(dú)寫在一行

3、 單行注釋與多行注釋

/* this is a short comment */

單行注釋可以寫在單獨(dú)一行，也可以寫在行尾，注釋中的每一行長度不超過40個漢字，或者80個英文字符。

/*
* this is comment line 1.
* this is comment line 2.
*/

多行注釋必須寫在單獨(dú)行內(nèi)

4、特殊注釋

/* TODO: xxxx by name 2013-04-13 18:32 */

/* BUGFIX: xxxx by name 2012-04-13 18:32 */

用于標(biāo)注修改、待辦等信息

5、區(qū)塊注釋

/* Header */ /* Footer */ /* Gallery */ 

對一個代碼區(qū)塊注釋（可選），將樣式語句分區(qū)塊并在新行中對其注釋。

三、命名規(guī)范

使用有意義的或通用的ID和class命名：ID和class的命名應(yīng)反映該元素的功能或使用通用名稱，而不要用抽象的晦澀的命名。反映元素的使用目的是就選；使用通用名稱代表該元素不表特定意義，與其同級元素?zé)o異，通常是用于輔助命名；使用功能性或通用的名稱可以更適用于文檔或模版變化的情況。

• /* 不推薦: 無意義 */ #yee-1901 {} 

• /* 不推薦: 與樣式相關(guān) */ .button-green {}.clear {} 

• /* 推薦: 特殊性 */ #gallery {}#login {}.video {} 

• /* 推薦: 通用性 */ .aux {}.alt {} 

常用命名（多記多查英文單詞）：page、wrap、layout、header(head)、footer(foot、ft)、content(cont)、menu、nav、main、submain、sidebar(side)、logo、banner、title(tit)、popo(pop)、icon、note、btn、txt、iblock、window(win)、tips等

ID和class命名越簡短越好，只要足夠表達(dá)涵義。這樣既有助于理解，也能提高代碼效率。

• /* 不推薦 */ #navigation {}.atr {} 

• /* 推薦 */ #nav {}.author {} 

類型選擇器避免同時使用標(biāo)簽、ID和class作為定位一個元素選擇器；從性能上考慮也應(yīng)盡量減少選擇器的層級。

• /* 不推薦 */ul#example {}div.error {} 

• /* 推薦 */#example {}.error {} 

命名時需要注意的點(diǎn)：

1. 規(guī)則命名中，一律采用小寫加中劃線的方式，不允許使用大寫字母或 _ 

2. 命名避免使用中文拼音，應(yīng)該采用更簡明有語義的英文單詞進(jìn)行組合 

3. 命名注意縮寫，但是不能盲目縮寫，具體請參見常用的CSS命名規(guī)則 

4. 不允許通過1、2、3等序號進(jìn)行命名 

5. 避免class與id重名 

6. id用于標(biāo)識模塊或頁面的某一個父容器區(qū)域，名稱必須 ，不要隨意新建id 

7. class用于標(biāo)識某一個類型的對象，命名必須言簡意賅。 

8. 盡可能提高代碼模塊的復(fù)用，樣式盡量用組合的方式 

9. 規(guī)則名稱中不應(yīng)該包含顏色（red/blue）、定位（left/right）等與具體顯示效果相關(guān)的信息。應(yīng)該用意義命名，而不是樣式顯示結(jié)果命名。 

1、常用id的命名：

(1)頁面結(jié)構(gòu)

• 容器: container 

• 頁頭：header 

• 內(nèi)容：content/container 

• 頁面主體：main 

• 頁尾：footer 

• 導(dǎo)航：nav 

• 側(cè)欄：sidebar 

• 欄目：column 

• 頁面外圍控制整體布局寬度：wrapper 

• 左右中：left right center 

(2)導(dǎo)航

• 導(dǎo)航：nav 

• 主導(dǎo)航：mainbav 

• 子導(dǎo)航：subnav 

• 頂導(dǎo)航：topnav 

• 邊導(dǎo)航：sidebar 

• 左導(dǎo)航：leftsidebar 

• 右導(dǎo)航：rightsidebar 

• 菜單：menu 

• 子菜單：submenu 

• 標(biāo)題: title 

• 摘要: summary 

(3)功能

• 標(biāo)志：logo 

• 廣告：banner 

• 登陸：login 

• 登錄條：loginbar 

• 注冊：regsiter 

• 搜索：search 

• 功能區(qū)：shop 

• 標(biāo)題：title 

• 加入：joinus 

• 狀態(tài)：status 

• 按鈕：btn 

• 滾動：scroll 

• 標(biāo)簽頁：tab 

• 文章列表：list 

• 提示信息：msg 

• 當(dāng)前的: current 

• 小技巧：tips 

• 圖標(biāo): icon 

• 注釋：note 

• 指南：guild 

• 服務(wù)：service 

• 熱點(diǎn)：hot 

• 新聞：news 

• 下載：download 

• 投票：vote 

• 合作伙伴：partner 

• 友情鏈接：link 

• 版權(quán)：copyright 

2、常用class的命名：

(1)顏色:使用顏色的名稱或者16進(jìn)制代碼,如

• .red { color: red; } 

• .f60 { color: #f60; } 

• .ff8600 { color: #ff8600; } 

(2)字體大小,直接使用”font+字體大小”作為名稱,如

• .font12px { font-size: 12px; } 

• .font9pt {font-size: 9pt; } 

(3)對齊樣式,使用對齊目標(biāo)的英文名稱,如

• .left { float:left; } 

• .bottom { float:bottom; } 

(4)標(biāo)題欄樣式,使用”類別+功能”的方式命名,如

• .barnews { } 

• .barproduct { } 

四、書寫規(guī)范

1、排版規(guī)范

(1)使用4個空格，而不使用tab或者混用空格+tab作為縮進(jìn)；

(2)規(guī)則可以寫成單行，或者多行，但是整個文件內(nèi)的規(guī)則排版必須統(tǒng)一；

單行形式書寫風(fēng)格的排版約束

• 如果是在html中寫內(nèi)聯(lián)的css，則必須寫成單行； 

• 每一條規(guī)則的大括號 { 前后加空格 ； 

• 每一條規(guī)則結(jié)束的大括號 } 前加空格； 

• 屬性名冒號之前不加空格，冒號之后加空格； 

• 每一個屬性值后必須添加分號; 并且分號后空格； 

• 多個selector共用一個樣式集，則多個selector必須寫成多行形式 ； 

多行形式書寫風(fēng)格的排版約束

• 每一條規(guī)則的大括號 { 前添加空格; 

• 多個selector共用一個樣式集，則多個selector必須寫成多行形式 ; 

• 每一條規(guī)則結(jié)束的大括號 } 必須與規(guī)則選擇器的一個字符對齊 ; 

• 屬性名冒號之前不加空格，冒號之后加空格; 

• 屬性值之后添加分號; 

2、屬性編寫順序

1. 顯示屬性：display/list-style/position/float/clear … 

2. 自身屬性（盒模型）：width/height/margin/padding/border 

3. 背景：background 

4. 行高：line-height 

5. 文本屬性：color/font/text-decoration/text-align/text-indent/vertical-align/white-space/content… 

6. 其他：cursor/z-index/zoom/overflow 

7. CSS3屬性：transform/transition/animation/box-shadow/border-radius 

8. 如果使用CSS3的屬性，如果有必要加入瀏覽器前綴，則按照 -webkit- / -moz- / -ms- / -o- / std的順序進(jìn)行添加，標(biāo)準(zhǔn)屬性寫在較后。 

9. 鏈接的樣式請嚴(yán)格按照如下順序添加： a:link -> a:visited -> a:hover -> a:active 

3、規(guī)則書寫規(guī)范

1. 使用單引號，不允許使用雙引號; 

2. 每個聲明結(jié)束都應(yīng)該帶一個分號，不管是不是較后一個聲明; 

3. 除16進(jìn)制顏色和字體設(shè)置外，CSS文件中的所有的代碼都應(yīng)該小寫; 

4. 除了重置瀏覽器默認(rèn)樣式外，禁止直接為html tag添加css樣式設(shè)置; 

5. 每一條規(guī)則應(yīng)該確保選擇器 ，禁止直接為全局.nav/.header/.body等類設(shè)置屬性; 

4、代碼性能優(yōu)化

1. 合并margin、padding、border的-left/-top/-right/-bottom的設(shè)置，盡量使用短名稱。 

2. 選擇器應(yīng)該在滿足功能的基礎(chǔ)上盡量簡短，減少選擇器嵌套，查詢消耗。但是一定要避免覆蓋全局樣式設(shè)置。 

3. 注意選擇器的性能，不要使用低性能的選擇器。 

4. 禁止在css中使用*選擇符。 

5. 除非必須，否則，一般有class或id的，不需要再寫上元素對應(yīng)的tag。 

6. 0后面不需要單位，比如0px可以省略成0，0.8px可以省略成.8px。 

7. 如果是16進(jìn)制表示顏色，則顏色取值應(yīng)該大寫。 

8. 如果可以，顏色盡量用三位字符表示，例如#AABBCC寫成#ABC 。 

9. 如果沒有邊框時，不要寫成border:0，應(yīng)該寫成border:none 。 

10. 盡量避免使用AlphaImageLoader 。 

11. 在保持代碼解耦的前提下，盡量合并重復(fù)的樣式。 

12. background、font等可以縮寫的屬性，盡量使用縮寫形式 。 

5、CSS Hack的使用

請不用動不動就使用瀏覽器檢測和CSS Hacks，先試試別的解決方法吧！考慮到代碼高效率和易管理，雖然這兩種方法能快速解決瀏覽器解析差異，但應(yīng)被視為較后的手段。在長期的項(xiàng)目中，允許使用hack只會帶來更多的hack，你越是使用它，你越是會依賴它！

推薦使用下面的：

6、字體規(guī)則

• 為了防止文件合并及編碼轉(zhuǎn)換時造成問題，建議將樣式中文字體名字改成對應(yīng)的英文名字，如：黑體(SimHei) 宋體(SimSun) 微軟雅黑 (Microsoft Yahei，幾個單詞中間有空格組成的必須加引號) 

• 字體粗細(xì)采用具體數(shù)值，粗體bold寫為700，正常normal寫為400 

• font-size必須以px或pt為單位，推薦用px（注：pt為打印版字體大小設(shè)置），不允許使用xx-small/x-small/small/medium/large/x-large/xx-large等值 

• 為了對font-family取值進(jìn)行統(tǒng)一，更好的支持各個操作系統(tǒng)上各個瀏覽器的兼容性，font-family不允許在業(yè)務(wù)代碼中隨意設(shè)置 

五、其他規(guī)范

• 不要輕易改動全站級CSS和通用CSS庫。改動后，要經(jīng)過全面測試。 

• 避免使用filter 

• 避免在CSS中使用expression 

• 避免過小的背景圖片平鋪。 

• 盡量不要在CSS中使用!important 

• 絕對不要在CSS中使用”*”選擇符 

• 層級(z-index)必須清晰明確，頁面彈窗、氣泡為較知名（較知名為999），不同彈窗氣泡之間可在三位數(shù)之間調(diào)整；普通區(qū)塊為10-90內(nèi)10的倍數(shù)；區(qū)塊展開、彈出為當(dāng)前父層級上個位增加，禁止層級間盲目攀比。 

• 背景圖片請盡可能使用sprite技術(shù), 減小http請求, 考慮到多人協(xié)作開發(fā), sprite按照模塊、業(yè)務(wù)、頁面來劃分均可。 

六、測試規(guī)范

1、了解瀏覽器特效支持

為了頁面性能考慮，如果瀏覽器不支持CSS3相關(guān)屬性的，則該瀏覽器的某些特效將不再支持，屬性的支持情況如下表所示（Y為支持，N為不支持）：

2、 設(shè)定瀏覽器支持標(biāo)準(zhǔn)

• A級－交互和視覺完全符全設(shè)計(jì)的要求 

• B級－視覺上允許有所差異，但不破壞頁面的整體效果 

• C級－可忽略設(shè)計(jì)上的細(xì)節(jié)，但不防礙使用 

3、常用樣式測試工具

W3C CSS validator：http://jigsaw.w3.org/css-validator/

CSS Lint：http://csslint.net/

CSS Usage：https://addons.mozilla.org/en-us/firefox/addon/css-usage/