不容忽略的——CSS規範

1、CSS分類方法：

1. 公共型樣式

2. 特殊型樣式

3. 皮膚型樣式

    並以此順序引用

1 <link href="assets/css/global.css" rel="stylesheet" type="text/css"/>
2 <link href="assets/css/index.css" rel="stylesheet" type="text/css"/>
3 <link href="assets/css/skin.css" rel="stylesheet" type="text/css"/>

2、CSS命名規則

1. 使用類選擇器，放棄ID選擇器
2. NEC特殊字符："-"連字符
3. 分類的命名方法：使用單個字母+"-"爲前綴
   佈局（grid）（.g-）；模塊（module）（.m-）；元件（unit）（.u-）；功能（function）（.f-）；皮膚（skin）（.s-）；狀態（.z-）。
    後代選擇器命名
   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{}），具體詳見命名規則的擴展相關項。
4. 不以單個字母+"-"爲前綴且長度大於等於2的類選擇器爲後代選擇器
   不容許單個字母的類選擇器出現
5. 相同語義的不一樣類命名
   直接加數字或字母區分便可（如：.m-list、.m-list二、.m-list3等）

         模塊和元件的擴展類的命名方法

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

方法：+「-」+數字或字母（如：.m-list的擴展類爲.m-list-一、.m-list-2等）。

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

3、代碼格式

1. 選擇器、屬性和值都使用小寫
2. 最後一個值也以分號結尾
3. 省略值爲0時的單位
4. 使用單引號

根據屬性的重要性按順序書寫
顯示屬性、自身屬性、文本屬性和其餘修飾

4、優化

若是CSS能夠作到，就不要使用JS

5、注意

• .class{}

  不要以一個沒有類別的樣式做爲主選擇器，這樣的選擇器只能做爲後代選擇器使用，好比.m-xxx .class{}。

• 選擇器並不須要完整反映結構嵌套順序，相反，能簡則簡。
• 擴展類必須和其基類同時使用於同一個節點。
  錯誤：class="g-xxx g-yyy-1" class="m-xxx-1" class="u-xxx u-yyy-1" class="xxx-yyy"。
  正確：class="g-xxx g-xxx-1" class="m-xxx m-xxx-1" class="u-yyy u-yyy-1" class="xxx xxx-yyy"。