文章出處

一、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"/>

二、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-list2、.m-list3等)

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

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

方法:+“-”+數字或字母(如:.m-list的擴展類為.m-list-1、.m-list-2等)。

補充:基類自身可以獨立使用(如:class="m-list"即可),擴展類必須基于基類使用(如:class="m-list m-list-2")。

三、代碼格式

  1. 選擇器、屬性和值都使用小寫
  2. 最后一個值也以分號結尾
  3. 省略值為0時的單位
  4. 使用單引號
根據屬性的重要性按順序書寫
顯示屬性、自身屬性、文本屬性和其他修飾

四、優化

如果CSS可以做到,就不要使用JS

五、注意

  • .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"。

 

 


文章列表


不含病毒。www.avast.com
arrow
arrow
    全站熱搜
    創作者介紹
    創作者 大師兄 的頭像
    大師兄

    IT工程師數位筆記本

    大師兄 發表在 痞客邦 留言(0) 人氣()