作為前端的設(shè)計(jì)人員筷狼，對(duì)于CSS的接觸，就像吃飯一樣匠童。所以CSS命名規(guī)范命名是前端人員必看的埂材。
文章整理了Web前端開發(fā)中的各種CSS規(guī)范，包括文件規(guī)范、注釋規(guī)范、命名規(guī)范嘱巾、書寫規(guī)范旦委、測(cè)試規(guī)范等。

一、文件規(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/
• 電臺(tái) /css/radio/

外聯(lián)CSS文件適用于全站級(jí)和產(chǎn)品級(jí)通用的大文件竞膳。內(nèi)聯(lián)CSS文件適用于在一個(gè)或幾個(gè)頁面共用的CSS。另外一對(duì)具體的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. 視頻/相冊(cè)列表項(xiàng) /css/core/media_item.css
• ui-03. 評(píng)星 /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. 老版對(duì)話框 /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。
• 單個(gè)CSS文件避免過大（建議少于300行）

二计技、注釋規(guī)范

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

1. /*
2. * @description: 中文說明
3. * @author: name
4. * @update: name (2013-04-13 18:32)
5. */

2、模塊注釋

1. /* module: module1 by 張三 */
2. …
3. /* module: module2 by 張三 */

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

3垮媒、 單行注釋與多行注釋

/* this is a short comment */ 單行注釋可以寫在單獨(dú)一行舍悯，也可以寫在行尾，注釋中的每一行長(zhǎng)度不超過40個(gè)漢字睡雇，或者80個(gè)英文字符萌衬。
/*

* 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ū)塊注釋

1. /* Header */
2. /* Footer */
3. /* Gallery */

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

三馁蒂、命名規(guī)范

使用有意義的或通用的ID和class命名：ID和class的命名應(yīng)反映該元素的功能或使用通用名稱呵晚，而不要用抽象的晦澀的命名蜘腌。反映元素的使用目的是首 選；使用通用名稱代表該元素不表特定意義饵隙，與其同級(jí)元素?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命名越簡(jiǎn)短越好路召，只要足夠表達(dá)涵義。這樣既有助于理解波材，也能提高代碼效率股淡。

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

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

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

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

• 規(guī)則命名中，一律采用小寫加中劃線的方式隙轻，不允許使用大寫字母或 _
• 命名避免使用中文拼音埠帕，應(yīng)該采用更簡(jiǎn)明有語義的英文單詞進(jìn)行組合
• 命名注意縮寫，但是不能盲目縮寫玖绿，具體請(qǐng)參見常用的CSS命名規(guī)則
• 不允許通過1敛瓷、2、3等序號(hào)進(jìn)行命名
• 避免class與id重名
• id用于標(biāo)識(shí)模塊或頁面的某一個(gè)父容器區(qū)域斑匪，名稱必須唯一呐籽，不要隨意新建id
• class用于標(biāo)識(shí)某一個(gè)類型的對(duì)象，命名必須言簡(jiǎn)意賅蚀瘸。
• 盡可能提高代碼模塊的復(fù)用狡蝶，樣式盡量用組合的方式
• 規(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
• 注冊(cè)：regsiter
• 搜索：search
• 功能區(qū)：shop
• 標(biāo)題：title
• 加入：joinus
• 狀態(tài)：status
• 按鈕：btn
• 滾動(dòng)：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)對(duì)齊樣式,使用對(duì)齊目標(biāo)的英文名稱,如

• .left { float:left; }
• .bottom { float:bottom; }

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

• .barnews { }
• .barproduct { }

四、書寫規(guī)范

1垫释、排版規(guī)范(1)使用4個(gè)空格丝格，而不使用tab或者混用空格+tab作為縮進(jìn)；(2)規(guī)則可以寫成單行棵譬，或者多行显蝌，但是整個(gè)文件內(nèi)的規(guī)則排版必須統(tǒng)一；

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

• 如果是在html中寫內(nèi)聯(lián)的css，則必須寫成單行曼尊；
• 每一條規(guī)則的大括號(hào) { 前后加空格 酬诀；
• 每一條規(guī)則結(jié)束的大括號(hào) } 前加空格；
• 屬性名冒號(hào)之前不加空格骆撇，冒號(hào)之后加空格瞒御；
• 每一個(gè)屬性值后必須添加分號(hào); 并且分號(hào)后空格；
• 多個(gè)selector共用一個(gè)樣式集神郊，則多個(gè)selector必須寫成多行形式 肴裙；

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

• 每一條規(guī)則的大括號(hào) { 前添加空格;
• 多個(gè)selector共用一個(gè)樣式集，則多個(gè)selector必須寫成多行形式 ;
• 每一條規(guī)則結(jié)束的大括號(hào) } 必須與規(guī)則選擇器的第一個(gè)字符對(duì)齊 ;
• 屬性名冒號(hào)之前不加空格涌乳，冒號(hào)之后加空格;
• 屬性值之后添加分號(hào);

2蜻懦、屬性編寫順序

• 顯示屬性：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)行添加宛乃，標(biāo)準(zhǔn)屬性寫在最后。
• 鏈接的樣式請(qǐng)嚴(yán)格按照如下順序添加： a:link -> a:visited -> a:hover -> a:active

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

• 使用單引號(hào)征炼，不允許使用雙引號(hào);
• 每個(gè)聲明結(jié)束都應(yīng)該帶一個(gè)分號(hào)，不管是不是最后一個(gè)聲明;
• 除16進(jìn)制顏色和字體設(shè)置外躬贡，CSS文件中的所有的代碼都應(yīng)該小寫;
• 除了重置瀏覽器默認(rèn)樣式外谆奥，禁止直接為html tag添加css樣式設(shè)置;
• 每一條規(guī)則應(yīng)該確保選擇器唯一，禁止直接為全局.nav/.header/.body等類設(shè)置屬性;

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

• 合并margin雄右、padding、border的-left/-top/-right/-bottom的設(shè)置纺讲，盡量使用短名稱。
• 選擇器應(yīng)該在滿足功能的基礎(chǔ)上盡量簡(jiǎn)短囤屹，減少選擇器嵌套熬甚，查詢消耗。但是一定要避免覆蓋全局樣式設(shè)置肋坚。
• 注意選擇器的性能乡括，不要使用低性能的選擇器。
• 禁止在css中使用*選擇符智厌。
• 除非必須诲泌，否則，一般有class或id的铣鹏，不需要再寫上元素對(duì)應(yīng)的tag敷扫。
• 0后面不需要單位，比如0px可以省略成0诚卸，0.8px可以省略成.8px葵第。
• 如果是16進(jìn)制表示顏色绘迁，則顏色取值應(yīng)該大寫。
• 如果可以卒密，顏色盡量用三位字符表示缀台，例如#AABBCC寫成#ABC 。
• 如果沒有邊框時(shí)哮奇，不要寫成border:0膛腐，應(yīng)該寫成border:none 。
• 盡量避免使用AlphaImageLoader 鼎俘。
• 在保持代碼解耦的前提下依疼，盡量合并重復(fù)的樣式。
• background而芥、font等可以縮寫的屬性律罢，盡量使用縮寫形式 。

5棍丐、CSS Hack的使用

請(qǐng)不用動(dòng)不動(dòng)就使用瀏覽器檢測(cè)和CSS Hacks误辑，先試試別的解決方法吧！考慮到代碼高效率和易管理歌逢，雖然這兩種方法能快速解決瀏覽器解析差異巾钉，但應(yīng)被視為最后的手段。在長(zhǎng)期的項(xiàng)目中秘案，允許使用hack只會(huì)帶來更多的hack砰苍，你越是使用它，你越是會(huì)依賴它阱高！

推薦使用下面的：

img

• 為了防止文件合并及編碼轉(zhuǎn)換時(shí)造成問題，建議將樣式中文字體名字改成對(duì)應(yīng)的英文名字赤惊，如：黑體(SimHei) 宋體(SimSun) 微軟雅黑 (Microsoft Yahei吼旧，幾個(gè)單詞中間有空格組成的必須加引號(hào))
• 字體粗細(xì)采用具體數(shù)值，粗體bold寫為700未舟，正常normal寫為400
• font-size必須以px或pt為單位圈暗，推薦用px（注：pt為打印版字體大小設(shè)置），不允許使用xx-small/x-small/small/medium/large/x-large/xx-large等值
• 為了對(duì)font-family取值進(jìn)行統(tǒng)一裕膀，更好的支持各個(gè)操作系統(tǒng)上各個(gè)瀏覽器的兼容性员串，font-family不允許在業(yè)務(wù)代碼中隨意設(shè)置

五、其他規(guī)范

• 不要輕易改動(dòng)全站級(jí)CSS和通用CSS庫昼扛。改動(dòng)后寸齐，要經(jīng)過全面測(cè)試。
• 避免使用filter
• 避免在CSS中使用expression
• 避免過小的背景圖片平鋪。
• 盡量不要在CSS中使用!important
• 絕對(duì)不要在CSS中使用”*”選擇符
• 層級(jí)(z-index)必須清晰明確访忿，頁面彈窗瞧栗、氣泡為最高級(jí)（最高級(jí)為999），不同彈窗氣泡之間可在三位數(shù)之間調(diào)整海铆；普通區(qū)塊為10-90內(nèi)10的倍數(shù)迹恐；區(qū)塊展開、彈出為當(dāng)前父層級(jí)上個(gè)位增加卧斟，禁止層級(jí)間盲目攀比殴边。
• 背景圖片請(qǐng)盡可能使用sprite技術(shù), 減小http請(qǐng)求, 考慮到多人協(xié)作開發(fā), sprite按照模塊、業(yè)務(wù)珍语、頁面來劃分均可锤岸。

六、測(cè)試規(guī)范

1板乙、了解瀏覽器特效支持為了頁面性能考慮是偷，如果瀏覽器不支持CSS3相關(guān)屬性的，則該瀏覽器的某些特效將不再支持募逞，屬性的支持情況如下表所示（Y為支持蛋铆，N為不支持）

img

img

• A級(jí)－交互和視覺完全符全設(shè)計(jì)的要求
• B級(jí)－視覺上允許有所差異放接，但不破壞頁面的整體效果
• C級(jí)－可忽略設(shè)計(jì)上的細(xì)節(jié)刺啦，但不防礙使用

3、常用樣式測(cè)試工具
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/

原文鏈接：http://www.86y.org/art_detail.aspx?id=740