文章整理了Web前端開(kāi)發(fā)中的各種CSS規范，包括文件規范、注釋規范、命名規范、書(shū)寫(xiě)規范、測試規范等。
一、文件規范 1、文件均歸檔至約定的目錄中。 具體要求通過(guò)豆瓣的CSS規范進(jìn)行講解： 所有的CSS分為兩大類(lèi)：通用類(lèi)和業(yè)務(wù)類(lèi)。通用的CSS文件，放在如下目錄中： - 基本樣式庫 /css/core
- 通用UI元素樣式庫 /css/lib
- JS組件相關(guān)樣式庫 /css/ui
業(yè)務(wù)類(lèi)的CSS是指和具體產(chǎn)品相關(guān)的文件，放在如下目錄中：
- 讀書(shū) /css/book/
- 電影 /css/movie/
- 音樂(lè ) /css/music/
- 社區 /css/sns/
- 小站 /css/site/
- 同城 /css/location/
- 電臺 /css/radio/
外聯(lián)CSS文件適用于全站級和產(chǎn)品級通用的大文件。內聯(lián)CSS文件適用于在一個(gè)或幾個(gè)頁(yè)面共用的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. 視頻/相冊列表項 /css/core/media_item.css
- ui-03. 評星 /css/core/rating.css
- ui-04. 通用按鈕 /css/core/common_button.css
- ui-05. 分頁(yè) /css/core/pagination.css
- ui-06. 推薦按鈕 /css/core/rec_btn.css
- ui-07. 老版對話(huà)框 /css/core/old_dialog.css
- ui-08. 老版Tab /css/core/old_tab.css
- ui-09. 老版成員列表 /css/core/old_userlist.css
- ui-10. 老版信息區 /css/core/notify.css
- ui-11. 社區用戶(hù)導航 /css/core/profile_nav.css
- ui-12. 當前大社區導航 /css/core/site_nav.css
- ui-13. 加載中 /css/lib/loading.css
2、文件引入可通過(guò)外聯(lián)或內聯(lián)方式引入。
- 外聯(lián)方式：（類(lèi)型聲明type=”text/css”可以省略）
- 內聯(lián)方式： （類(lèi)型聲明type=”text/css”可以省略）
link和style標簽都應該放入head中，原則上，不允許在html上直接寫(xiě)樣式。避免在CSS中使用@import，嵌套不要超過(guò)一層。
3、文件名、文件編碼及文件大小
- 文件名必須由小寫(xiě)字母、數字、中劃線(xiàn)組成
- 文件必須用UTF-8編碼，使用UTF-8（非BOM），在HTML中指定UTF-8編碼，在CSS中則不需要特別指定因為默認就是UTF-8。
- 單個(gè)CSS文件避免過(guò)大（建議少于300行）
二、注釋規范
1、文件頂部注釋?zhuān)ㄍ扑]使用） - /*
- * @description: 中文說(shuō)明
- * @author: name
- * @update: name (2013-04-13 18:32)
- */
2、模塊注釋 - /* module: module1 by 張三 */
- …
- /* module: module2 by 張三 */
模塊注釋必須單獨寫(xiě)在一行
3、 單行注釋與多行注釋
/* this is a short comment */ 單行注釋可以寫(xiě)在單獨一行，也可以寫(xiě)在行尾，注釋中的每一行長(cháng)度不超過(guò)40個(gè)漢字，或者80個(gè)英文字符。 /*
* this is comment line 1.
* this is comment line 2.
*/ 多行注釋必須寫(xiě)在單獨行內
4、特殊注釋
/* TODO: xxxx by name 2013-04-13 18:32 */ /* BUGFIX: xxxx by name 2012-04-13 18:32 */ 用于標注修改、待辦等信息
5、區塊注釋 - /* Header */
- /* Footer */
- /* Gallery */
對一個(gè)代碼區塊注釋?zhuān)蛇x），將樣式語(yǔ)句分區塊并在新行中對其注釋。
三、命名規范
使用有意義的或通用的ID和class命名：ID和class的命名應反映該元素的功能或使用通用名稱(chēng)，而不要用抽象的晦澀的命名。反映元素的使用目的是首選；使用通用名稱(chēng)代表該元素不表特定意義，與其同級元素無(wú)異，通常是用于輔助命名；使用功能性或通用的名稱(chēng)可以更適用于文檔或模版變化的情況。 - /* 不推薦: 無(wú)意義 */ #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命名越簡(jiǎn)短越好，只要足夠表達涵義。這樣既有助于理解，也能提高代碼效率。 - /* 不推薦 */ #navigation {}.atr {}
- /* 推薦 */ #nav {}.author {}
類(lèi)型選擇器避免同時(shí)使用標簽、ID和class作為定位一個(gè)元素選擇器；從性能上考慮也應盡量減少選擇器的層級。
- /* 不推薦 */ul#example {}div.error {}
- /* 推薦 */#example {}.error {}
命名時(shí)需要注意的點(diǎn)：
- 規則命名中，一律采用小寫(xiě)加中劃線(xiàn)的方式，不允許使用大寫(xiě)字母或 _
- 命名避免使用中文拼音，應該采用更簡(jiǎn)明有語(yǔ)義的英文單詞進(jìn)行組合
- 命名注意縮寫(xiě)，但是不能盲目縮寫(xiě)，具體請參見(jiàn)常用的CSS命名規則
- 不允許通過(guò)1、2、3等序號進(jìn)行命名
- 避免class與id重名
- id用于標識模塊或頁(yè)面的某一個(gè)父容器區域，名稱(chēng)必須唯一，不要隨意新建id
- class用于標識某一個(gè)類(lèi)型的對象，命名必須言簡(jiǎn)意賅。
- 盡可能提高代碼模塊的復用，樣式盡量用組合的方式
- 規則名稱(chēng)中不應該包含顏色（red/blue）、定位（left/right）等與具體顯示效果相關(guān)的信息。應該用意義命名，而不是樣式顯示結果命名。
1、常用id的命名：
(1)頁(yè)面結構 - 容器: container
- 頁(yè)頭：header
- 內容：content/container
- 頁(yè)面主體：main
- 頁(yè)尾：footer
- 導航：nav
- 側欄：sidebar
- 欄目：column
- 頁(yè)面外圍控制整體布局寬度：wrapper
- 左右中：left right center
(2)導航
- 導航：nav
- 主導航：mainbav
- 子導航：subnav
- 頂導航：topnav
- 邊導航：sidebar
- 左導航：leftsidebar
- 右導航：rightsidebar
- 菜單：menu
- 子菜單：submenu
- 標題: title
- 摘要: summary
(3)功能
- 標志：logo
- 廣告：banner
- 登陸：login
- 登錄條：loginbar
- 注冊：regsiter
- 搜索：search
- 功能區：shop
- 標題：title
- 加入：joinus
- 狀態(tài)：status
- 按鈕：btn
- 滾動(dòng)：scroll
- 標簽頁(yè)：tab
- 文章列表：list
- 提示信息：msg
- 當前的: current
- 小技巧：tips
- 圖標: icon
- 注釋?zhuān)簄ote
- 指南：guild
- 服務(wù)：service
- 熱點(diǎn)：hot
- 新聞：news
- 下載：download
- 投票：vote
- 合作伙伴：partner
- 友情鏈接：link
- 版權：copyright
2、常用class的命名：
(1)顏色:使用顏色的名稱(chēng)或者16進(jìn)制代碼,如 - .red { color: red; }
- .f60 { color: #f60; }
- .ff8600 { color: #ff8600; }
(2)字體大小,直接使用”font+字體大小”作為名稱(chēng),如
- .font12px { font-size: 12px; }
- .font9pt {font-size: 9pt; }
(3)對齊樣式,使用對齊目標的英文名稱(chēng),如
- .left { float:left; }
- .bottom { float:bottom; }
(4)標題欄樣式,使用”類(lèi)別+功能”的方式命名,如
- .barnews { }
- .barproduct { }
四、書(shū)寫(xiě)規范
1、排版規范 (1)使用4個(gè)空格，而不使用tab或者混用空格+tab作為縮進(jìn)； (2)規則可以寫(xiě)成單行，或者多行，但是整個(gè)文件內的規則排版必須統一； 單行形式書(shū)寫(xiě)風(fēng)格的排版約束 - 如果是在html中寫(xiě)內聯(lián)的css，則必須寫(xiě)成單行；
- 每一條規則的大括號 { 前后加空格 ；
- 每一條規則結束的大括號 } 前加空格；
- 屬性名冒號之前不加空格，冒號之后加空格；
- 每一個(gè)屬性值后必須添加分號; 并且分號后空格；
- 多個(gè)selector共用一個(gè)樣式集，則多個(gè)selector必須寫(xiě)成多行形式 ；
多行形式書(shū)寫(xiě)風(fēng)格的排版約束
- 每一條規則的大括號 { 前添加空格;
- 多個(gè)selector共用一個(gè)樣式集，則多個(gè)selector必須寫(xiě)成多行形式 ;
- 每一條規則結束的大括號 } 必須與規則選擇器的第一個(gè)字符對齊 ;
- 屬性名冒號之前不加空格，冒號之后加空格;
- 屬性值之后添加分號;
2、屬性編寫(xiě)順序
- 顯示屬性：display/list-style/position/float/clear …
- 自身屬性（盒模型）：width/height/margin/padding/border
- 背景：background
- 行高：line-height
- 文本屬性：color/font/text-decoration/text-align/text-indent/vertical-align/white-space/content…
- 其他：cursor/z-index/zoom/overflow
- CSS3屬性：transform/transition/animation/box-shadow/border-radius
- 如果使用CSS3的屬性，如果有必要加入瀏覽器前綴，則按照 -webkit- / -moz- / -ms- / -o- / std的順序進(jìn)行添加，標準屬性寫(xiě)在最后。
- 鏈接的樣式請嚴格按照如下順序添加： a:link -> a:visited -> a:hover -> a:active
3、規則書(shū)寫(xiě)規范
- 使用單引號，不允許使用雙引號;
- 每個(gè)聲明結束都應該帶一個(gè)分號，不管是不是最后一個(gè)聲明;
- 除16進(jìn)制顏色和字體設置外，CSS文件中的所有的代碼都應該小寫(xiě);
- 除了重置瀏覽器默認樣式外，禁止直接為html tag添加css樣式設置;
- 每一條規則應該確保選擇器唯一，禁止直接為全局.nav/.header/.body等類(lèi)設置屬性;
4、代碼性能優(yōu)化
- 合并margin、padding、border的-left/-top/-right/-bottom的設置，盡量使用短名稱(chēng)。
- 選擇器應該在滿(mǎn)足功能的基礎上盡量簡(jiǎn)短，減少選擇器嵌套，查詢(xún)消耗。但是一定要避免覆蓋全局樣式設置。
- 注意選擇器的性能，不要使用低性能的選擇器。
- 禁止在css中使用*選擇符。
- 除非必須，否則，一般有class或id的，不需要再寫(xiě)上元素對應的tag。
- 0后面不需要單位，比如0px可以省略成0，0.8px可以省略成.8px。
- 如果是16進(jìn)制表示顏色，則顏色取值應該大寫(xiě)。
- 如果可以，顏色盡量用三位字符表示，例如#AABBCC寫(xiě)成#ABC 。
- 如果沒(méi)有邊框時(shí)，不要寫(xiě)成border:0，應該寫(xiě)成border:none 。
- 盡量避免使用AlphaImageLoader 。
- 在保持代碼解耦的前提下，盡量合并重復的樣式。
- background、font等可以縮寫(xiě)的屬性，盡量使用縮寫(xiě)形式 。
5、CSS Hack的使用
請不用動(dòng)不動(dòng)就使用瀏覽器檢測和CSS Hacks，先試試別的解決方法吧！考慮到代碼高效率和易管理，雖然這兩種方法能快速解決瀏覽器解析差異，但應被視為最后的手段。在長(cháng)期的項目中，允許使用hack只會(huì )帶來(lái)更多的hack，你越是使用它，你越是會(huì )依賴(lài)它！
推薦使用下面的：
[/url] 6、字體規則 - 為了防止文件合并及編碼轉換時(shí)造成問(wèn)題，建議將樣式中文字體名字改成對應的英文名字，如：黑體(SimHei) 宋體(SimSun) 微軟雅黑 (Microsoft Yahei，幾個(gè)單詞中間有空格組成的必須加引號)
- 字體粗細采用具體數值，粗體bold寫(xiě)為700，正常normal寫(xiě)為400
- font-size必須以px或pt為單位，推薦用px（注：pt為打印版字體大小設置），不允許使用xx-small/x-small/small/medium/large/x-large/xx-large等值
- 為了對font-family取值進(jìn)行統一，更好的支持各個(gè)操作系統上各個(gè)瀏覽器的兼容性，font-family不允許在業(yè)務(wù)代碼中隨意設置
五、其他規范- 不要輕易改動(dòng)全站級CSS和通用CSS庫。改動(dòng)后，要經(jīng)過(guò)全面測試。
- 避免使用filter
- 避免在CSS中使用expression
- 避免過(guò)小的背景圖片平鋪。
- 盡量不要在CSS中使用!important
- 絕對不要在CSS中使用”*”選擇符
- 層級(z-index)必須清晰明確，頁(yè)面彈窗、氣泡為最高級（最高級為999），不同彈窗氣泡之間可在三位數之間調整；普通區塊為10-90內10的倍數；區塊展開(kāi)、彈出為當前父層級上個(gè)位增加，禁止層級間盲目攀比。
- 背景圖片請盡可能使用sprite技術(shù), 減小http請求, 考慮到多人協(xié)作開(kāi)發(fā), sprite按照模塊、業(yè)務(wù)、頁(yè)面來(lái)劃分均可。
六、測試規范1、了解瀏覽器特效支持 為了頁(yè)面性能考慮，如果瀏覽器不支持CSS3相關(guān)屬性的，則該瀏覽器的某些特效將不再支持，屬性的支持情況如下表所示（Y為支持，N為不支持）： 2、 設定瀏覽器支持標準 - A級－交互和視覺(jué)完全符全設計的要求
- B級－視覺(jué)上允許有所差異，但不破壞頁(yè)面的整體效果
- C級－可忽略設計上的細節，但不防礙使用
3、常用樣式測試工具 W3C CSS validator： http://jigsaw.w3.org/css-validator/
CSS Usage：https://addons.mozilla.org/en-us/firefox/addon/css-usage/
| 
