CSS代碼命名規範

使用類別選取器，放棄ID選取器

ID在一個頁面中的唯一性導致了如果以ID為選取器來寫CSS，就無法重用。

NEC特殊字元："-"連字號

"-"在本規範中並不表示連字號的含義。

她只表示兩種含義：分類首碼分隔字元、擴充分隔字元，詳見以下具體規則。

分類的命名方法：使用單個字母+"-"為首碼

布局（grid）（.g-）；模組（module）（.m-）；元件（unit）（.u-）；功能（function）（.f-）；皮膚（skin）（.s-）；狀態（.z-）。

註：在你樣式中的選取器總是要以上面前五類開頭，然後在裡面使用後代選取器。

　　如果這五類不能滿足你的需求，你可以另外定義一個或多個大類，但必須符合單個字母+"-"為首碼的命名規則，即 .x- 的格式。

　　特殊：.j-將被專用於JS擷取節點，請勿使用.j-定義樣式。

後代選取器命名

約定不以單個字母+"-"為首碼且長度大於等於2的類別選取器為後代選取器，如：.item為m-list模組裡的每一個項，.text為m-list模組裡的文本部分：.m-list .item{}.m-list .text{}。

一個語義化的標籤也可以是後代選取器，比如：.m-list li{}。

不允許單個字母的類別選取器出現，原因詳見下面的“模組和元件的後代選取器的擴充類”。

通過使用後代選取器的方法，你不需要考慮他的命名是否已被使用，因為他只在當前模組或元件中生效，同樣的樣式名可以在不同的模組或元件中重複使用，互不干擾；在多人協作或者分模組協作的時候效果尤為明顯！

後代選取器不需要完整表現結構樹層級，盡量能短則短。

註：後代選取器不要在頁面配置中使用，因為汙染的可能性較大；

/* 這裡的.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;}

命名應簡約而不失語義

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

相同語義的不同類命名

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

其他舉例：.f-fw0、.f-fw1、.s-fc0、.s-fc1、.m-logo2、.m-logo3、u-btn、u-btn2等等。

模組和元件的擴充類的命名方法

當A、B、C、...它們類型相同且外形相似區別不大，那麼就以它們中出現率最高的做成基類，其他做成基類的擴充。

方法：+“-”+數字或字母（如：.m-list的擴充類為.m-list-1、.m-list-2等）。

補充：基類自身可以獨立使用（如：class="m-list"即可），擴充類必須基於基類使用（如：class="m-list m-list-2"）。

如果你的擴充類是表示不同狀態，那麼你可以這樣命名：u-btn-dis，u-btn-hov，m-box-sel，m-box-hov等等，然後像這樣使用：class="u-btn u-btn-dis"。

如果你的網站可以不相容IE6等瀏覽器，那麼你標識狀態的方法也可以採取獨立狀態分類（.z-）方法：.u-btn.z-dis，.m-box.z-sel，然後像這樣使用：class="u-btn z-dis"。

模組和元件的後代選取器的擴充類

有時候模組內會有些類似的東西，如果你沒有把它們做成元件和擴充，那麼也可以使用後代選取器和擴充。

後代選取器：.m-login .btn{}。

後代選取器擴充：.m-login .btn-1{}，.m-login .btn-dis{}。

同樣也可以採取獨立狀態分類（.z-）方法：.m-login .btn.z-dis{}，然後像這樣使用：class="btn z-dis"。

註：此方法用於類別選取器，直接使用標籤做為選取器的則不需要使用此命名方法。

註：為防止後代選取器的擴充類和大類命名規範衝突，後代選取器不允許使用單個字母。

　　比如：.m-list .a{}是不允許的，因為當這個.a需要擴充的時候就會變成.a-bb，這樣就和大類的命名規範衝突。

分組選取器有時可以代替擴充方法

有時候雖然兩個同類型的模組很相似，但是你希望他們之間不要有依賴關係，也就是說你不希望使用擴充的方法，那麼你可以通過合并選取器來設定共性的樣式。

使用本方法的前提是：相同類型、功能和外觀都相似，寫在同一片代碼地區方便維護。

  /* 兩個元件共性的樣式 */.u-tip1,.u-tip2{}.u-tip1 .itm,.u-tip2 .itm{}/* 在分別是兩個元件各自的樣式 *//* tip1 */.u-tip1{}.u-tip1 .itm{}/* tip2 */.u-tip2{}.u-tip2 .itm{}

防止汙染和被汙染

當模組或元件之間互相嵌套，且使用了相同的標籤選取器或其他後代選取器，那麼裡面的選取器就會被外面相同的選取器所影響。

所以，如果你的模組或元件可能嵌套或被嵌套於其他模組或元件，那麼要慎用標籤選取器，必要時採用類別選取器，並注意命名方式，可以採用.m-layer .layerxxx、.m-list2 .list2xxx的形式來降低後代選取器的汙染性。

