[TOC] ## 前言 本文就css代碼規范進行簡單的整理，不完善以及不正確之處歡迎大家批評指正。 ## 選擇器 * 選擇器命名 選擇器命名，class命名時選擇語義化的，不建議使用直接樣式效果，比如.red,.fontBold，另外整體的樣式文件中命名建議使用統一的規則，或者駝峰式，或者中劃線分割，命名注意縮寫，避免與id重名，不建議通過1 2 3等序號命名。關于命名規則以及常見類名可以本站搜索相關文章 * 選擇器選擇原則 基本的選擇器中，盡量使用類選擇器；復雜選擇器中，盡量少使用層次、屬性的相關選擇器。 * 樣式重用 樣式重復可以一定程度的避免，用類樣式來提煉公共樣式，建議多用樣式的預處理，比如less。基本使用類選擇器實現重用最簡單實用。 * 合理的避免id的使用 原因有二：一個是id修飾權重比較高，不容易被class修改重定義；第二個，id一般被用來定義特定模塊的。如果該模塊是可重用的，或者不具有特殊意義的不建議使用。 * 篩選出同時具有 中間沒有任何間隔，與群組選擇器，后代選擇器區分開 * 非主流選擇器 主要包括：偽類選擇器，結構選擇器，偽元素，屬性選擇器，語言選擇器等。可以本站搜索選擇器攻略查看所有的選擇器分類以及使用。基于兼容性考慮，建議大家慎用。 * 選擇器層級 層級關系確定在3層以內，去除不必要的層級關系，簡化dom結構或者樣式組件結構。 ## 樣式分類 * 全局樣式 顧名思義，沒有任何限制條件的樣式，可以任何位置使用并達到其顯示效果。如果可能有樣式代碼沖突的，建議寫在樣式組合中最后。定義全局樣式的時候，注意樣式污染的問題。一般建議用`.c- `來區分。 * 布局樣式 一般用于頁面布局，我們經常會把頁面布局和模塊混合起來，或者根本就不區分。這實際是因為我們對樣式理解不夠深刻。實際。從視圖分析，很多模塊在寬高以及整體布局上都是基于整體布局的。而一些整體布局又是可以重用的，所以這部分建議單獨分出來，提高開發效率。一般建議用`.g- `來區分。 * 模塊樣式 以模塊的思維去寫樣式代碼，按照層級關系依次展開樣式，保證模塊清晰同時使得一些樣式名稱可復用，比如title,price等。其中模塊樣式頂級也可以理解為命名空間，模塊子樣式可以追加模塊樣式前綴，比如header-nav。模塊樣式是樣式代碼中占據比例最多的部分，針對具體樣式，希望既能做到針對業務，又能提煉出可復用、耦合度低的優質模塊。一般建議用`.m- `來區分。 * 組件樣式 頁面中總有一部分常規組件是我們經常用的，定義好他們對我們開發工作有事半功倍的效果。這些組件常見的有，按鈕，單選框，多選框，下拉框，時間選擇控件等。一般建議用`.u- `來區分。 * 功能樣式（交互樣式） 有些頁面中的元素是有額外的含義的，涉及到這類樣式時，有時有特定的交互，或者功能，或者內容，我們針對這部分定義為功能樣式，比如刪除，查看詳情，增加，搜索，這些在涉及具體功能時追加的效果，我們會寫在功能樣式中。一般建議用`.f- `來區分。 * 皮膚樣式 任何一個網站或者頁面都有其布局思想，在這個整體的布局當中，顏色自然是不可缺少的，針對主色，交互色，響應顏色，配色等，我們都會把這一類歸到皮膚樣式中。一般建議用`.s- `來區分。 ## 樣式優化 * 合理利用繼承和默認 1. 可繼承的樣式如果是正確的，不用重寫；如果是不對的，糾正； 2. 任何樣式都有默認值。或者是繼承來的默認值，針對默認值要清楚，決定是否調整 * 抽離公共樣式 代碼中有超過2個類超過3行以上公用代碼，建議抽離公共樣式到公共區或者提煉公共樣式 * 復合屬性縮寫 比如font,border,margin,padding,background等 * 減少層級關系 層級關系越多，代碼量越大，同時訪問越慢 * 使用高效能的選擇器 多使用class選擇器，css的查詢順序為從右向左，所以最后一個選擇器基本決定了你第一次匹配得到的整體數量。 * 重繪與重排 影響標簽顯示樣式的叫重繪；影響標簽大小-盒模型，位置關系的稱為重排。盡量減少這兩種，如果有需要，優先選擇用重繪代替重排。 * 待補充 ## 書寫規范 1. 規則完成一組之后換行， 2. 選擇器開始語法之前大括號前面加空格。 3. 只有單行樣式時放一行，兩行以上每行樣式一行，每一行添加分號，最后一行也加。 4. 每個樣式屬性值前添加空格而屬性名之后不加空格。 5. 數值為0的不用加單位，數值小于1的前面的0可以省略。 6. 沒有邊框的時候寫border:none 7. 減少使用低性能的選擇器，比如標簽，*，多層 8. 除了顏色以及字體外，所有的代碼小寫，如果有引號使用單引號 9. 字體名稱請映射成對應的英文名 10. 背景圖片請合理使用csssprites，按照模塊、業務、頁面來劃分均可 11. css背景圖片的文件類型，請按照以下原則來保存:如果背景圖片有動畫，則保存成gif,如果沒有動畫，也沒有半透明效果，則保存成png-8,如果有半透明效果，則保存成png-24 12. 清除浮動采用樣式，不使用增加空標簽的方式 13. 避免過小的背景圖片平鋪 14. 減少使用important 15. 待補充... ## 編寫順序 1. 顯示屬性 display/list-style/position/float/clear 2. 盒子模型 width/height/margin/padding/border 3. 背景 background 4. 行高 文本屬性其他 line-height,color/font/text-decoration/text-align/, text-indent/vertical-align/white-space/content, cursor/z-index/zoom 5. css3屬性 transform/transition/animation/box-shadow/border-radius 6. 鏈接的樣式請嚴格按照如下順序添加 a:link -> a:visited -> a:hover -> a:active ## 注釋規范 注釋長度要求：注釋中的每一行長度不超過40個漢字，或者80個英文字符 * 文件頂部注釋 ``` css /* * @description: xxxxx中文說明 * @author: zhifu.wang * @update: zhifu.wang (2012-10-17 18:32) */ ``` * 模塊注釋，模塊注釋必須單獨寫在一行 ``` css /* module: module1 by zhifu.wang */ ``` * 單行注釋，單行注釋可以寫在單獨一行，也可以寫在行尾 ``` css /* this is a short comment */ ``` * 多行注釋 :多行注釋必須寫在單獨行內 ``` css /* * this is comment line 1. * this is comment line 2. */ ``` * 特殊注釋 :用于標注修改、待辦等信息 ``` css /* TODO: xxxx by zhifu.wang 2012-10-18 18:32 */ /* BUGFIX: xxxx by zhifu.wang 2012-10-18 18:32 */ ``` ## 瀏覽器hack * 瀏覽器的hack ：能少用就少用hack ,瀏覽器的hack如下，注意按照一定的順序書寫： -webkit-,-moz-,-o-,-ms-,通用的，針對ie不同版本的，歸納如下： ``` css IE6 _property: value IE7 +property: value IE6/7 *property: value IE6/7/8/9 property: value\9 ``` ## 其他 待補充...