CSS規范 - 命名規則


使用類選擇器,放棄ID選擇器

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

NEC特殊字符:"-"連字符

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

她只表示兩種含義:分類前綴分隔符、擴展分隔符,詳見以下具體規則。

分類的命名方法:使用單個字母+"-"為前綴

布局(grid)(.g-);模塊(module)(.m-);元件(unit)(.u-);功能(function)(.f-);皮膚(skin)(.s-);狀態(.z-)。

對以上的解釋詳情參見:分類方法中的“CSS內部的分類及其順序”。

注:在你樣式中的選擇器總是要以上面前五類開頭,然后在里面使用后代選擇器。

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

  特殊:.j-將被專用於JS獲取節點,請勿使用.j-定義樣式。

后代選擇器命名
  • 約定不以單個字母+"-"為前綴且長度大於等於2的類選擇器為后代選擇器,如:.item為m-list模塊里的每一個項,.text為m-list模塊里的文本部分:.m-list .item{}.m-list .text{}。
  • 一個語義化的標簽也可以是后代選擇器,比如:.m-list li{}。
  • 不允許單個字母的類選擇器出現,原因詳見下面的“模塊和元件的后代選擇器的擴展類”。

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

后代選擇器不需要完整表現結構樹層級,盡量能短則短。

注:后代選擇器不要在頁面布局中使用,因為污染的可能性較大;

1
2
3
4
5
6
7
8
/*
這里的.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 ;}
命名應簡約而不失語義
1
2
3
4
5
6
/*
反對:表現化的或沒有語義的命名 */
.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,這樣就和大類的命名規范沖突。

分組選擇器有時可以代替擴展方法

有時候雖然兩個同類型的模塊很相似,但是你希望他們之間不要有依賴關系,也就是說你不希望使用擴展的方法,那么你可以通過合並選擇器來設置共性的樣式。

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

1
2
3
4
5
6
7
8
9
10
/*
兩個元件共性的樣式 */
.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的形式來降低后代選擇器的污染性。


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com