## CSS內部的分類及其順序
1. 布局（grid）（.g-）：將頁面分割為幾個大塊，通常有頭部、主體、主欄、側欄、尾部等！
2. 模塊（module）（.m-）：通常是一個語義化的可以重復使用的較大的整體！比如導航、登錄、注冊、各種列表、評論、搜索等！
3. 元件（unit）（.u-）：通常是一個不可再分的較為小巧的個體，通常被重復用于各種模塊中！比如按鈕、輸入框、loading、圖標等！
4. 功能（function）（.f-）：為方便一些常用樣式的使用，我們將這些使用率較高的樣式剝離出來，按需使用，通常這些選擇器具有固定樣式表現，比如清除浮動等！不可濫用！
5. 皮膚（skin）（.s-）：如果你需要把皮膚型的樣式抽離出來，通常為文字色、背景色（圖）、邊框色等，非換膚型網站通常只提取文字色！非換膚型網站不可濫用此類！
6. 狀態（.z-）：為狀態類樣式加入前綴，統一標識，方便識別，她只能組合使用或作為后代出現（.u-ipt.z-dis{}，.m-list li.z-sel{}），具體詳見命名規則的擴展相關項。
## 模塊和元件的擴展類的命名方法
當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"。
## 分類的命名方法：使用單個字母+"-"為前綴
布局（grid）（.g-）；模塊（module）（.m-）；元件（unit）（.u-）；功能（function）（.f-）；皮膚（skin）（.s-）；狀態（.z-）。
## 命名應簡約而不失語義
~~~
/* 反對：表現化的或沒有語義的命名 */
.m-abc .green2{}
.g-left2{}
/* 推薦：使用有語義的簡短的命名 */
.m-list .wrap2{}
.g-side2{}
~~~
## 后代選擇器命名
1. 約定不以單個字母+"-"為前綴且長度大于等于2的類選擇器為后代選擇器，如：.item為m-list模塊里的每一個項，.text為m-list模塊里的文本部分：.m-list .item{}.m-list .text{}。
2. 一個語義化的標簽也可以是后代選擇器，比如：.m-list li{}。
3. 不允許單個字母的類選擇器出現，原因詳見下面的“模塊和元件的后代選擇器的擴展類”。
## 使用類選擇器，放棄ID選擇器
ID在一個頁面中的唯一性導致了如果以ID為選擇器來寫CSS，就無法重用。
## 特殊字符："-"連字符
"-"在本規范中并不表示連字符的含義。
分類的命名方法：使用單個字母+"-"為前綴
## 防止污染和被污染
當模塊或元件之間互相嵌套，且使用了相同的標簽選擇器或其他后代選擇器，那么里面的選擇器就會被外面相同的選擇器所影響。
所以，如果你的模塊或元件可能嵌套或被嵌套于其他模塊或元件，那么要慎用標簽選擇器，必要時采用類選擇器，并注意命名方式，可以采用.m-layer .layerxxx、.m-list2 .list2xxx的形式來降低后代選擇器的污染性。
## 分組選擇器有時可以代替擴展方法
有時候雖然兩個同類型的模塊很相似，但是你希望他們之間不要有依賴關系，也就是說你不希望使用擴展的方法，那么你可以通過合并選擇器來設置共性的樣式。
使用本方法的前提是：相同類型、功能和外觀都相似，寫在同一片代碼區域方便維護。
~~~
/* 兩個元件共性的樣式 */
.u-tip1,.u-tip2{}
.u-tip1 .itm,.u-tip2 .itm{}
/* 在分別是兩個元件各自的樣式 */
/* tip1 */
.u-tip1{}
.u-tip1 .itm{}
/* tip2 */
.u-tip2{}
.u-tip2 .itm{}
~~~
> 以下為補充項
## 相同語義的不同類命名
方法：直接加數字或字母區分即可（如：.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，這樣就和大類的命名規范沖突。
