前端人員必看CSS命名規範
阿新 • • 發佈：2018-12-26
作為前端的設計人員，對於CSS的接觸，就像吃飯一樣。所以CSS命名規範 命名是 前端人員必看的。
文章整理了Web前端開發中的各種CSS規範，包括檔案規範、註釋規範、命名規範、書寫規範、測試規範等。
一、檔案規範1、檔案均歸檔至約定的目錄中。具體要求通過豆瓣的CSS規範進行講解：所有的CSS分為兩大類：通用類和業務類。通用的CSS檔案，放在如下目錄中：
業務類的CSS是指和具體產品相關的檔案，放在如下目錄中：
外聯CSS檔案適用於全站級和產品級通用的大檔案。內聯CSS檔案適用於在一個或幾個頁面共用的CSS。另外一對具體的CSS進行文件化的整理。如：
- 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. 分頁 /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. 老版資訊區 /css/core/notify.css
- ui-11. 社群使用者導航 /css/core/profile_nav.css
- ui-12. 當前大社群導航 /css/core/site_nav.css
- ui-13. 載入中 /css/lib/loading.css
2、檔案引入可通過外聯或內聯方式引入。
- 外聯方式：（型別宣告type=”text/css”可以省略）
- 內聯方式： （型別宣告type=”text/css”可以省略）
link和style標籤都應該放入head中，原則上，不允許在html上直接寫樣式。避免在CSS中使用@import，巢狀不要超過一層。
3、檔名、檔案編碼及檔案大小
- 檔名必須由小寫字母、數字、中劃線組成
- 檔案必須用UTF-8編碼，使用UTF-8（非BOM），在HTML中指定UTF-8編碼，在CSS中則不需要特別指定因為預設就是UTF-8。
- 單個CSS檔案避免過大（建議少於300行）
二、註釋規範
1、檔案頂部註釋（推薦使用）
- /*
- * @description: 中文說明
- * @author: name
- * @update: name (2013-04-13 18:32)
- */
複製程式碼2、模組註釋
- /* module: module1 by 張三 */
- …
- /* module: module2 by 張三 */
複製程式碼模組註釋必須單獨寫在一行
3、 單行註釋與多行註釋
/* this is a short comment
*/單行註釋可以寫在單獨一行，也可以寫在行尾，註釋中的每一行長度不超過40個漢字，或者80個英文字元。/*
* this is comment line 1.
* this is comment line 2.
*/多行註釋必須寫在單獨行內
4、特殊註釋
/* TODO: xxxx by name 2013-04-13 18:32 *//* BUGFIX: xxxx by name
2012-04-13 18:32 */用於標註修改、待辦等資訊
5、區塊註釋
- /* Header */
- /* Footer */
- /* Gallery */
複製程式碼對一個程式碼區塊註釋（可選），將樣式語句分割槽塊並在新行中對其註釋。
三、命名規範
使
用有意義的或通用的ID和class命名：ID和class的命名應反映該元素的功能或使用通用名稱，而不要用抽象的晦澀的命名。反映元素的使用目的是首
選；使用通用名稱代表該元素不表特定意義，與其同級元素無異，通常是用於輔助命名；使用功能性或通用的名稱可以更適用於文件或模版變化的情況。
- /* 不推薦: 無意義 */ #yee-1901 {}
- /* 不推薦: 與樣式相關 */ .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命名越簡短越好，只要足夠表達涵義。這樣既有助於理解，也能提高程式碼效率。
- /* 不推薦 */ #navigation {}.atr {}
- /* 推薦 */ #nav {}.author {}
型別選擇器避免同時使用標籤、ID和class作為定位一個元素選擇器；從效能上考慮也應儘量減少選擇器的層級。
- /* 不推薦 */ul#example {}div.error {}
- /* 推薦 */#example {}.error {}
命名時需要注意的點：
- 規則命名中，一律採用小寫加中劃線的方式，不允許使用大寫字母或 _
- 命名避免使用中文拼音，應該採用更簡明有語義的英文單詞進行組合
- 命名注意縮寫，但是不能盲目縮寫，具體請參見常用的CSS命名規則
- 不允許通過1、2、3等序號進行命名
- 避免class與id重名
- id用於標識模組或頁面的某一個父容器區域，名稱必須唯一，不要隨意新建id
- class用於標識某一個型別的物件，命名必須言簡意賅。
- 儘可能提高程式碼模組的複用，樣式儘量用組合的方式
-
規則名稱中不應該包含顏色（red/blue）、定位（left/right）等與具體顯示效果相關的資訊。應該用意義命名，而不是樣式顯示結果命名。
1、常用id的命名：
(1)頁面結構
- 容器: container
- 頁頭：header
- 內容：content/container
- 頁面主體：main
- 頁尾：footer
- 導航：nav
- 側欄：sidebar
- 欄目：column
- 頁面外圍控制整體佈局寬度：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
- 狀態：status
- 按鈕：btn
- 滾動：scroll
- 標籤頁：tab
- 文章列表：list
- 提示資訊：msg
- 當前的: current
- 小技巧：tips
- 圖示: icon
- 註釋：note
- 指南：guild
- 服務：service
- 熱點：hot
- 新聞：news
- 下載：download
- 投票：vote
- 合作伙伴：partner
- 友情連結：link
- 版權：copyright
四、書寫規範
1、排版規範(1)使用4個空格，而不使用tab或者混用空格+tab作為縮排；(2)規則可以寫成單行，或者多行，但是整個檔案內的規則排版必須統一；單行形式書寫風格的排版約束
- 如果是在html中寫內聯的css，則必須寫成單行；
- 每一條規則的大括號 { 前後加空格 ；
- 每一條規則結束的大括號 } 前加空格；
- 屬性名冒號之前不加空格，冒號之後加空格；
- 每一個屬性值後必須新增分號; 並且分號後空格；
- 多個selector共用一個樣式集，則多個selector必須寫成多行形式 ；
多行形式書寫風格的排版約束
- 每一條規則的大括號 { 前新增空格;
- 多個selector共用一個樣式集，則多個selector必須寫成多行形式 ;
- 每一條規則結束的大括號 } 必須與規則選擇器的第一個字元對齊 ;
- 屬性名冒號之前不加空格，冒號之後加空格;
- 屬性值之後新增分號;
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的順序進行新增，標準屬性寫在最後。
- 連結的樣式請嚴格按照如下順序新增： a:link -> a:visited -> a:hover -> a:active
3、規則書寫規範
- 使用單引號，不允許使用雙引號;
- 每個宣告結束都應該帶一個分號，不管是不是最後一個宣告;
- 除16進位制顏色和字型設定外，CSS檔案中的所有的程式碼都應該小寫;
- 除了重置瀏覽器預設樣式外，禁止直接為html tag新增css樣式設定;
- 每一條規則應該確保選擇器唯一，禁止直接為全域性.nav/.header/.body等類設定屬性;
4、程式碼效能優化
- 合併margin、padding、border的-left/-top/-right/-bottom的設定，儘量使用短名稱。
- 選擇器應該在滿足功能的基礎上儘量簡短，減少選擇器巢狀，查詢消耗。但是一定要避免覆蓋全域性樣式設定。
- 注意選擇器的效能，不要使用低效能的選擇器。
- 禁止在css中使用*選擇符。
- 除非必須，否則，一般有class或id的，不需要再寫上元素對應的tag。
- 0後面不需要單位，比如0px可以省略成0，0.8px可以省略成.8px。
- 如果是16進製表示顏色，則顏色取值應該大寫。
- 如果可以，顏色儘量用三位字元表示，例如#AABBCC寫成#ABC 。
- 如果沒有邊框時，不要寫成border:0，應該寫成border:none 。
- 儘量避免使用AlphaImageLoader 。
- 在保持程式碼解耦的前提下，儘量合併重複的樣式。
- background、font等可以縮寫的屬性，儘量使用縮寫形式 。
5、CSS Hack的使用
請不用動不動就使用瀏覽器檢測和CSS
Hacks，先試試別的解決方法吧！考慮到程式碼高效率和易管理，雖然這兩種方法能快速解決瀏覽器解析差異，但應被視為最後的手段。在長期的專案中，允許使用hack只會帶來更多的hack，你越是使用它，你越是會依賴它！
推薦使用下面的：
<ignore_js_op>
[/url]
6、字型規則
- 為了防止檔案合併及編碼轉換時造成問題，建議將樣式中文字型名字改成對應的英文名字，如：黑體(SimHei) 宋體(SimSun) 微軟雅黑
(Microsoft Yahei，幾個單詞中間有空格組成的必須加引號)
- 字型粗細採用具體數值，粗體bold寫為700，正常normal寫為400
-
font-size必須以px或pt為單位，推薦用px（注：pt為列印版字型大小設定），不允許使用xx-small/x-small/small/medium/large/x-large/xx-large等值
- 為了對font-family取值進行統一，更好的支援各個作業系統上各個瀏覽器的相容性，font-family不允許在業務程式碼中隨意設定
五、其他規範
- 不要輕易改動全站級CSS和通用CSS庫。改動後，要經過全面測試。
- 避免使用filter
- 避免在CSS中使用expression
- 避免過小的背景圖片平鋪。
- 儘量不要在CSS中使用!important
- 絕對不要在CSS中使用”*”選擇符
-
層級(z-index)必須清晰明確，頁面彈窗、氣泡為最高階（最高階為999），不同彈窗氣泡之間可在三位數之間調整；普通區塊為10-90內10的倍數；區塊展開、彈出為當前父層級上個位增加，禁止層級間盲目攀比。
- 背景圖片請儘可能使用sprite技術, 減小http請求, 考慮到多人協作開發, sprite按照模組、業務、頁面來劃分均可。
六、測試規範
1、瞭解瀏覽器特效支援為了頁面效能考慮，如果瀏覽器不支援CSS3相關屬性的，則該瀏覽器的某些特效將不再支援，屬性的支援情況如下表所示（Y為支援，N為不支援）：<ignore_js_op>
2、 設定瀏覽器支援標準
<ignore_js_op>
- A級－互動和視覺完全符全設計的要求
- B級－視覺上允許有所差異，但不破壞頁面的整體效果
- C級－可忽略設計上的細節，但不防礙使用
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/
原文連結：http://www.86y.org/art_detail.aspx?id=740
文章整理了Web前端開發中的各種CSS規範，包括檔案規範、註釋規範、命名規範、書寫規範、測試規範等。
一、檔案規範1、檔案均歸檔至約定的目錄中。具體要求通過豆瓣的CSS規範進行講解：所有的CSS分為兩大類：通用類和業務類。通用的CSS檔案，放在如下目錄中：
業務類的CSS是指和具體產品相關的檔案，放在如下目錄中：
外聯CSS檔案適用於全站級和產品級通用的大檔案。內聯CSS檔案適用於在一個或幾個頁面共用的CSS。另外一對具體的CSS進行文件化的整理。如：
- 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. 分頁 /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. 老版資訊區 /css/core/notify.css
- ui-11. 社群使用者導航 /css/core/profile_nav.css
- ui-12. 當前大社群導航 /css/core/site_nav.css
- ui-13. 載入中 /css/lib/loading.css
2、檔案引入可通過外聯或內聯方式引入。
- 外聯方式：（型別宣告type=”text/css”可以省略）
- 內聯方式： （型別宣告type=”text/css”可以省略）
link和style標籤都應該放入head中，原則上，不允許在html上直接寫樣式。避免在CSS中使用@import，巢狀不要超過一層。
3、檔名、檔案編碼及檔案大小
- 檔名必須由小寫字母、數字、中劃線組成
- 檔案必須用UTF-8編碼，使用UTF-8（非BOM），在HTML中指定UTF-8編碼，在CSS中則不需要特別指定因為預設就是UTF-8。
- 單個CSS檔案避免過大（建議少於300行）
二、註釋規範
1、檔案頂部註釋（推薦使用）
- /*
- * @description: 中文說明
- * @author: name
- * @update: name (2013-04-13 18:32)
- */
複製程式碼2、模組註釋
- /* module: module1 by 張三 */
- …
- /* module: module2 by 張三 */
複製程式碼模組註釋必須單獨寫在一行
3、 單行註釋與多行註釋
/* this is a short comment
*/單行註釋可以寫在單獨一行，也可以寫在行尾，註釋中的每一行長度不超過40個漢字，或者80個英文字元。/*
* this is comment line 1.
* this is comment line 2.
*/多行註釋必須寫在單獨行內
4、特殊註釋
/* TODO: xxxx by name 2013-04-13 18:32 *//* BUGFIX: xxxx by name
2012-04-13 18:32 */用於標註修改、待辦等資訊
5、區塊註釋
- /* Header */
- /* Footer */
- /* Gallery */
複製程式碼對一個程式碼區塊註釋（可選），將樣式語句分割槽塊並在新行中對其註釋。
三、命名規範
使
用有意義的或通用的ID和class命名：ID和class的命名應反映該元素的功能或使用通用名稱，而不要用抽象的晦澀的命名。反映元素的使用目的是首
選；使用通用名稱代表該元素不表特定意義，與其同級元素無異，通常是用於輔助命名；使用功能性或通用的名稱可以更適用於文件或模版變化的情況。
- /* 不推薦: 無意義 */ #yee-1901 {}
- /* 不推薦: 與樣式相關 */ .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命名越簡短越好，只要足夠表達涵義。這樣既有助於理解，也能提高程式碼效率。
- /* 不推薦 */ #navigation {}.atr {}
- /* 推薦 */ #nav {}.author {}
型別選擇器避免同時使用標籤、ID和class作為定位一個元素選擇器；從效能上考慮也應儘量減少選擇器的層級。
- /* 不推薦 */ul#example {}div.error {}
- /* 推薦 */#example {}.error {}
命名時需要注意的點：
- 規則命名中，一律採用小寫加中劃線的方式，不允許使用大寫字母或 _
- 命名避免使用中文拼音，應該採用更簡明有語義的英文單詞進行組合
- 命名注意縮寫，但是不能盲目縮寫，具體請參見常用的CSS命名規則
- 不允許通過1、2、3等序號進行命名
- 避免class與id重名
- id用於標識模組或頁面的某一個父容器區域，名稱必須唯一，不要隨意新建id
- class用於標識某一個型別的物件，命名必須言簡意賅。
- 儘可能提高程式碼模組的複用，樣式儘量用組合的方式
-
規則名稱中不應該包含顏色（red/blue）、定位（left/right）等與具體顯示效果相關的資訊。應該用意義命名，而不是樣式顯示結果命名。
1、常用id的命名：
(1)頁面結構
- 容器: container
- 頁頭：header
- 內容：content/container
- 頁面主體：main
- 頁尾：footer
- 導航：nav
- 側欄：sidebar
- 欄目：column
- 頁面外圍控制整體佈局寬度：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
- 狀態：status
- 按鈕：btn
- 滾動：scroll
- 標籤頁：tab
- 文章列表：list
- 提示資訊：msg
- 當前的: current
- 小技巧：tips
- 圖示: icon
- 註釋：note
- 指南：guild
- 服務：service
- 熱點：hot
- 新聞：news
- 下載：download
- 投票：vote
- 合作伙伴：partner
- 友情連結：link
- 版權：copyright
四、書寫規範
1、排版規範(1)使用4個空格，而不使用tab或者混用空格+tab作為縮排；(2)規則可以寫成單行，或者多行，但是整個檔案內的規則排版必須統一；單行形式書寫風格的排版約束
- 如果是在html中寫內聯的css，則必須寫成單行；
- 每一條規則的大括號 { 前後加空格 ；
- 每一條規則結束的大括號 } 前加空格；
- 屬性名冒號之前不加空格，冒號之後加空格；
- 每一個屬性值後必須新增分號; 並且分號後空格；
- 多個selector共用一個樣式集，則多個selector必須寫成多行形式 ；
多行形式書寫風格的排版約束
- 每一條規則的大括號 { 前新增空格;
- 多個selector共用一個樣式集，則多個selector必須寫成多行形式 ;
- 每一條規則結束的大括號 } 必須與規則選擇器的第一個字元對齊 ;
- 屬性名冒號之前不加空格，冒號之後加空格;
- 屬性值之後新增分號;
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的順序進行新增，標準屬性寫在最後。
- 連結的樣式請嚴格按照如下順序新增： a:link -> a:visited -> a:hover -> a:active
3、規則書寫規範
- 使用單引號，不允許使用雙引號;
- 每個宣告結束都應該帶一個分號，不管是不是最後一個宣告;
- 除16進位制顏色和字型設定外，CSS檔案中的所有的程式碼都應該小寫;
- 除了重置瀏覽器預設樣式外，禁止直接為html tag新增css樣式設定;
- 每一條規則應該確保選擇器唯一，禁止直接為全域性.nav/.header/.body等類設定屬性;
4、程式碼效能優化
- 合併margin、padding、border的-left/-top/-right/-bottom的設定，儘量使用短名稱。
- 選擇器應該在滿足功能的基礎上儘量簡短，減少選擇器巢狀，查詢消耗。但是一定要避免覆蓋全域性樣式設定。
- 注意選擇器的效能，不要使用低效能的選擇器。
- 禁止在css中使用*選擇符。
- 除非必須，否則，一般有class或id的，不需要再寫上元素對應的tag。
- 0後面不需要單位，比如0px可以省略成0，0.8px可以省略成.8px。
- 如果是16進製表示顏色，則顏色取值應該大寫。
- 如果可以，顏色儘量用三位字元表示，例如#AABBCC寫成#ABC 。
- 如果沒有邊框時，不要寫成border:0，應該寫成border:none 。
- 儘量避免使用AlphaImageLoader 。
- 在保持程式碼解耦的前提下，儘量合併重複的樣式。
- background、font等可以縮寫的屬性，儘量使用縮寫形式 。
5、CSS Hack的使用
請不用動不動就使用瀏覽器檢測和CSS
Hacks，先試試別的解決方法吧！考慮到程式碼高效率和易管理，雖然這兩種方法能快速解決瀏覽器解析差異，但應被視為最後的手段。在長期的專案中，允許使用hack只會帶來更多的hack，你越是使用它，你越是會依賴它！
推薦使用下面的：
<ignore_js_op>
[/url]
6、字型規則
- 為了防止檔案合併及編碼轉換時造成問題，建議將樣式中文字型名字改成對應的英文名字，如：黑體(SimHei) 宋體(SimSun) 微軟雅黑
(Microsoft Yahei，幾個單詞中間有空格組成的必須加引號)
- 字型粗細採用具體數值，粗體bold寫為700，正常normal寫為400
-
font-size必須以px或pt為單位，推薦用px（注：pt為列印版字型大小設定），不允許使用xx-small/x-small/small/medium/large/x-large/xx-large等值
- 為了對font-family取值進行統一，更好的支援各個作業系統上各個瀏覽器的相容性，font-family不允許在業務程式碼中隨意設定
五、其他規範
- 不要輕易改動全站級CSS和通用CSS庫。改動後，要經過全面測試。
- 避免使用filter
- 避免在CSS中使用expression
- 避免過小的背景圖片平鋪。
- 儘量不要在CSS中使用!important
- 絕對不要在CSS中使用”*”選擇符
-
層級(z-index)必須清晰明確，頁面彈窗、氣泡為最高階（最高階為999），不同彈窗氣泡之間可在三位數之間調整；普通區塊為10-90內10的倍數；區塊展開、彈出為當前父層級上個位增加，禁止層級間盲目攀比。
- 背景圖片請儘可能使用sprite技術, 減小http請求, 考慮到多人協作開發, sprite按照模組、業務、頁面來劃分均可。
六、測試規範
1、瞭解瀏覽器特效支援為了頁面效能考慮，如果瀏覽器不支援CSS3相關屬性的，則該瀏覽器的某些特效將不再支援，屬性的支援情況如下表所示（Y為支援，N為不支援）：<ignore_js_op>
2、 設定瀏覽器支援標準
<ignore_js_op>
- A級－互動和視覺完全符全設計的要求
- B級－視覺上允許有所差異，但不破壞頁面的整體效果
- C級－可忽略設計上的細節，但不防礙使用
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/
原文連結：http://www.86y.org/art_detail.aspx?id=740