CSS 編碼規(guī)范

命名規(guī)則

使用類選擇器，放棄ID選擇器
ID在一個頁面中的唯一性導(dǎo)致了如果以ID為選擇器來寫CSS，就無法重用。

后代選擇器命名

不允許單個字母的類選擇器出現(xiàn)，比如.item {},原因如下。
通過使用后代選擇器的方法，你不需要考慮他的命名是否已被使用，因為他只在當(dāng)前模塊中生效，同樣的樣式名可以在不同的模塊或元件中重復(fù)使用，互不干擾；在多人協(xié)作或者分模塊協(xié)作的時候效果尤為明顯！。
后代選擇器不需要完整表現(xiàn)結(jié)構(gòu)樹層級，盡量能短則短。

注：后代選擇器不要在頁面布局中使用，因為污染的可能性較大；

/* 這里的.itm和.cnt只在.m-list中有效 */
.m-list{margin:0;padding:0;}
.m-list .itm{margin:1px;padding:1px;}
.m-list .cnt{margin-left:100px;}
/* 這里的.cnt和.num只在.m-page中有效 */
.m-page{height:20px;}
.m-page .cnt{text-align:center;}
.m-page .num{border:1px solid #ddd;}

命名應(yīng)簡約而不失語義

/* 反對：表現(xiàn)化的或沒有語義的命名 */
.m-abc .green2{}
.g-left2{}
/* 推薦：使用有語義的簡短的命名 */
.m-list .wrap2{}
.g-side2{}

相同語義的不同類命名

方法：直接加數(shù)字或字母區(qū)分即可（如：.m-list、.m-list2、.m-list3等，都是列表模塊，但是是完全不一樣的模塊）。

代碼格式

省略url引用中的引號，其他需要引號的地方使用單引號。

.m-box{background:url(bg.png);}
.m-box:after{content:'.';}

屬性編寫順序

• 顯示屬性：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)屬性寫在最后。
• 鏈接的樣式請嚴(yán)格按照如下順序添加： a:link -> a:visited -> a:hover -> a:active

選擇器等級

• a = 行內(nèi)樣式style。
• b = ID選擇器的數(shù)量。
• c = 類、偽類和屬性選擇器的數(shù)量。
• d = 類型選擇器和偽元素選擇器的數(shù)量。

優(yōu)化方案

值縮寫

縮寫值可以減少CSS文件大小，并增加可讀性和可維護(hù)性。
但并非所有的值都必須縮寫，因為當(dāng)一個屬性的值縮寫時，總是會將所有項都設(shè)置一遍，而有時候我們不希望設(shè)置值里的某些項。

/* 比如我們用下面這個樣式來讓某個定寬的容器水平居中，我們要的只是left和right，
 * 而top和bottom不是這個樣式要關(guān)心的（如果設(shè)置了反倒會影響其他樣式在這個容器上的使用），
 * 所以這時我們就不需要縮寫
 */
.f-mgha{margin-left:auto;margin-right:auto;}
/* 比如下面這個模塊的樣式設(shè)置，我們確實需要設(shè)置padding的所有項，于是我們就可以采用縮寫 */
.m-link{padding:6px 12px;}

使用16進(jìn)制表示顏色值

比如顏色值#ffffff，盡量縮寫。

.m-box{color:#fff;}

省略值為0時的單位

為節(jié)省不必要的字節(jié)同時也使閱讀方便，我們將0px、0em、0%等值縮寫為0。

統(tǒng)一語義理解和命名