清華大佬耗費(fèi)三個(gè)月吐血整理的幾百G的資源，免費(fèi)分享！....>>>

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

ID在一個(gè)頁(yè)面中的唯一性導(dǎo)致了如果以ID為選擇器來(lái)寫(xiě)CSS，就無(wú)法重用。

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

"-"在本規(guī)范中并不表示連字符的含義。

她只表示兩種含義：分類前綴分隔符、擴(kuò)展分隔符，詳見(jiàn)以下具體規(guī)則。

分類的命名方法：使用單個(gè)字母+"-"為前綴

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

對(duì)以上的解釋詳情參見(jiàn)：分類方法中的“CSS內(nèi)部的分類及其順序”。

注：在你樣式中的選擇器總是要以上面前五類開(kāi)頭，然后在里面使用后代選擇器。

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

　　特殊：.j-將被專用于JS獲取節(jié)點(diǎn)，請(qǐng)勿使用.j-定義樣式。

后代選擇器命名

• 約定不以單個(gè)字母+"-"為前綴且長(zhǎng)度大于等于2的類選擇器為后代選擇器，如：.item為m-list模塊里的每一個(gè)項(xiàng)，.text為m-list模塊里的文本部分：.m-list .item{}.m-list .text{}。
• 一個(gè)語(yǔ)義化的標(biāo)簽也可以是后代選擇器，比如：.m-list li{}。
• 不允許單個(gè)字母的類選擇器出現(xiàn)，原因詳見(jiàn)下面的“模塊和元件的后代選擇器的擴(kuò)展類”。

通過(guò)使用后代選擇器的方法，你不需要考慮他的命名是否已被使用，因?yàn)樗辉诋?dāng)前模塊或元件中生效，同樣的樣式名可以在不同的模塊或元件中重復(fù)使用，互不干擾；在多人協(xié)作或者分模塊協(xié)作的時(shí)候效果尤為明顯！

后代選擇器不需要完整表現(xiàn)結(jié)構(gòu)樹(shù)層級(jí)，盡量能短則短。

注：后代選擇器不要在頁(yè)面布局中使用，因?yàn)槲廴镜目赡苄暂^大；

/* 這里的.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;} 

命名應(yīng)簡(jiǎn)約而不失語(yǔ)義

/* 反對(duì)：表現(xiàn)化的或沒(méi)有語(yǔ)義的命名 */ 
.m-abc .green2{} 
.g-left2{} 
/* 推薦：使用有語(yǔ)義的簡(jiǎn)短的命名 */ 
.m-list .wrap2{} 
.g-side2{} 

相同語(yǔ)義的不同類命名

方法：直接加數(shù)字或字母區(qū)分即可（如：.m-list、.m-list2、.m-list3等，都是列表模塊，但是是完全不一樣的模塊）。

其他舉例：.f-fw0、.f-fw1、.s-fc0、.s-fc1、.m-logo2、.m-logo3、u-btn、u-btn2等等。

模塊和元件的擴(kuò)展類的命名方法

當(dāng)A、B、C、...它們類型相同且外形相似區(qū)別不大，那么就以它們中出現(xiàn)率最高的做成基類，其他做成基類的擴(kuò)展。

方法：+“-”+數(shù)字或字母（如：.m-list的擴(kuò)展類為.m-list-1、.m-list-2等）。

補(bǔ)充：基類自身可以獨(dú)立使用（如：class="m-list"即可），擴(kuò)展類必須基于基類使用（如：class="m-list m-list-2"）。

如果你的擴(kuò)展類是表示不同狀態(tài)，那么你可以這樣命名：u-btn-dis，u-btn-hov，m-box-sel，m-box-hov等等，然后像這樣使用：class="u-btn u-btn-dis"。

如果你的網(wǎng)站可以不兼容IE6等瀏覽器，那么你標(biāo)識(shí)狀態(tài)的方法也可以采取獨(dú)立狀態(tài)分類（.z-）方法：.u-btn.z-dis，.m-box.z-sel，然后像這樣使用：class="u-btn z-dis"。

模塊和元件的后代選擇器的擴(kuò)展類

有時(shí)候模塊內(nèi)會(huì)有些類似的東西，如果你沒(méi)有把它們做成元件和擴(kuò)展，那么也可以使用后代選擇器和擴(kuò)展。

后代選擇器：.m-login .btn{}。

后代選擇器擴(kuò)展：.m-login .btn-1{}，.m-login .btn-dis{}。

同樣也可以采取獨(dú)立狀態(tài)分類（.z-）方法：.m-login .btn.z-dis{}，然后像這樣使用：class="btn z-dis"。

注：此方法用于類選擇器，直接使用標(biāo)簽做為選擇器的則不需要使用此命名方法。

注：為防止后代選擇器的擴(kuò)展類和大類命名規(guī)范沖突，后代選擇器不允許使用單個(gè)字母。

　　比如：.m-list .a{}是不允許的，因?yàn)楫?dāng)這個(gè).a需要擴(kuò)展的時(shí)候就會(huì)變成.a-bb，這樣就和大類的命名規(guī)范沖突。

分組選擇器有時(shí)可以代替擴(kuò)展方法

有時(shí)候雖然兩個(gè)同類型的模塊很相似，但是你希望他們之間不要有依賴關(guān)系，也就是說(shuō)你不希望使用擴(kuò)展的方法，那么你可以通過(guò)合并選擇器來(lái)設(shè)置共性的樣式。

使用本方法的前提是：相同類型、功能和外觀都相似，寫(xiě)在同一片代碼區(qū)域方便維護(hù)。

/* 兩個(gè)元件共性的樣式 */ 
.u-tip1,.u-tip2{} 
.u-tip1 .itm,.u-tip2 .itm{} 
/* 在分別是兩個(gè)元件各自的樣式 */ 
/* tip1 */ 
.u-tip1{} 
.u-tip1 .itm{} 
/* tip2 */ 
.u-tip2{} 
.u-tip2 .itm{} 

防止污染和被污染

當(dāng)模塊或元件之間互相嵌套，且使用了相同的標(biāo)簽選擇器或其他后代選擇器，那么里面的選擇器就會(huì)被外面相同的選擇器所影響。

所以，如果你的模塊或元件可能嵌套或被嵌套于其他模塊或元件，那么要慎用標(biāo)簽選擇器，必要時(shí)采用類選擇器，并注意命名方式，可以采用.m-layer .layerxxx、.m-list2 .list2xxx的形式來(lái)降低后代選擇器的污染性。