文章出處
文章列表
一、CSS分類方法:
-
公共型樣式
-
特殊型樣式
-
皮膚型樣式
并以此順序引用
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命名規則
- 使用類選擇器,放棄ID選擇器
- NEC特殊字符:"-"連字符
- 分類的命名方法:使用單個字母+"-"為前綴
布局(grid)(.g-);模塊(module)(.m-);元件(unit)(.u-);功能(function)(.f-);皮膚(skin)(.s-);狀態(.z-)。
后代選擇器命名- 布局(grid)(.g-):將頁面分割為幾個大塊,通常有頭部、主體、主欄、側欄、尾部等!
- 模塊(module)(.m-):通常是一個語義化的可以重復使用的較大的整體!比如導航、登錄、注冊、各種列表、評論、搜索等!
- 元件(unit)(.u-):通常是一個不可再分的較為小巧的個體,通常被重復用于各種模塊中!比如按鈕、輸入框、loading、圖標等!
- 功能(function)(.f-):為方便一些常用樣式的使用,我們將這些使用率較高的樣式剝離出來,按需使用,通常這些選擇器具有固定樣式表現,比如清除浮動等!不可濫用!
- 皮膚(skin)(.s-):如果你需要把皮膚型的樣式抽離出來,通常為文字色、背景色(圖)、邊框色等,非換膚型網站通常只提取文字色!非換膚型網站不可濫用此類!
- 狀態(.z-):為狀態類樣式加入前綴,統一標識,方便識別,她只能組合使用或作為后代出現(.u-ipt.z-dis{},.m-list li.z-sel{}),具體詳見命名規則的擴展相關項。
- 不以單個字母+"-"為前綴且長度大于等于2的類選擇器為后代選擇器
不允許單個字母的類選擇器出現 - 相同語義的不同類命名
直接加數字或字母區分即可(如:.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")。
三、代碼格式
- 選擇器、屬性和值都使用小寫
- 最后一個值也以分號結尾
- 省略值為0時的單位
- 使用單引號
根據屬性的重要性按順序書寫
顯示屬性、自身屬性、文本屬性和其他修飾
四、優化
如果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"。
文章列表
全站熱搜