CSS選擇器命名規(guī)則及常用命名

CSS 發(fā)布時間：2022/07/13 閱讀量：1379 來源：優(yōu)尚設(shè)計

在實(shí)際項目中，因為參與人員個人習(xí)慣不一樣，導(dǎo)致寫出的CSS選擇器命名千奇百怪，對項目維護(hù)運(yùn)營、內(nèi)部技術(shù)溝通均產(chǎn)生了不利影響。因此在項目實(shí)施前，網(wǎng)頁重構(gòu)人員有必要統(tǒng)一CSS選擇器命名規(guī)則，以期將更多精力放在其他工作上。

W3C規(guī)范

W3C?CSS2.1的 4.1.3 節(jié)中提到：標(biāo)識符（包括選擇器中的元素名，類和ID）只能包含字符[a- zA-Z0-9]和ISO 10646字符編碼U+00A1及以上，再加連字號（-）和下劃線（_）；它們不能以數(shù)字，或一個連字號后跟數(shù)字為開頭。它們還可以包含轉(zhuǎn)義字符加任何ISO 10646字符作為一個數(shù)字編碼。

選擇器命名規(guī)則

字符采用

實(shí)際項目中，建議只采用字符[a-zA-Z0-9]，再加連字號（-）和下劃線（_）。避免使用中文。

慎用數(shù)字

以字母開頭，避免純數(shù)字，避免數(shù)字開頭，以保證兼容。以數(shù)字開始的類名、ID名僅在IE6/IE7/IE8下被識別，而其它瀏覽器下則不識別（忽略該規(guī)則）。

區(qū)分ID和class

一個ID名在文檔中只使用一次，class類名可在文檔中多次使用。

語義化標(biāo)簽

語義化標(biāo)簽是個很大的話題，簡單點(diǎn)說，語義化標(biāo)簽就是讓css選擇器的命名能夠反映頁面結(jié)構(gòu)的功能區(qū)塊，如內(nèi)容區(qū)域的class類名定義為content，頁腳區(qū)域的class類名定義為footer。語義化標(biāo)簽的一個好處是讓網(wǎng)頁結(jié)構(gòu)一目了然，另外一個好處是提高網(wǎng)頁對一些特殊瀏覽設(shè)備的友好性。

語義化標(biāo)簽的一個誤區(qū)是按CSS樣式表現(xiàn)的結(jié)果命名。

如，某區(qū)域字體大小為14px,則該區(qū)域的樣式名定義為font14px,css樣式為.font14px{ font-size:14px;}。如，某區(qū)域字體顏色為紅色，則樣式定義為red,css樣式為.red { color: red; }。

這樣的好處是實(shí)現(xiàn)某種程度的“所見即所得”，即只需要看該結(jié)構(gòu)的樣式名，即可知道該樣式控制（實(shí)現(xiàn)）著怎樣的效果。但其弊端同樣明顯。

可以想象，假設(shè)是產(chǎn)品boss突然要將某區(qū)域的字體顏色從red改為blue,那你是只更改.red { color: red; }將其改為.red { color: blue; }?還是“勤快”的將html頁面所有的red類名更改替換為blue,再添加一個新樣式.blue { color: blue; }?

前者意味著“所見非所得”，當(dāng)看到一個命名為red的樣式卻表現(xiàn)為blue時，你是否覺得很詭異??？

后者意味著無止境的替換或修改，若是文件較少，還可以接受。但若是有成百上千個頁面，你需要將成百上千的文件替換樣式名稱后再上傳，崩潰了，有木有？

所以嚴(yán)重建議不按CSS樣式表現(xiàn)的結(jié)果命名。

從深層層次分析，CSS的出現(xiàn)是讓HTML只專注于結(jié)構(gòu)，實(shí)現(xiàn)網(wǎng)頁結(jié)構(gòu)和樣式的分離，這也是CSS能夠代替表格布局而風(fēng)靡的重要原因。按CSS樣式表現(xiàn)結(jié)果命名，實(shí)際上是讓HTML結(jié)構(gòu)和CSS產(chǎn)生強(qiáng)耦合，是違背結(jié)構(gòu)和樣式分離的。

區(qū)分大小寫

當(dāng)在XHTML中使用CSS，CSS里定義的元素名稱是區(qū)分大小寫的。為了避免這種錯誤，我建議所有的定義名稱都采用小寫。
class和id的值在HTML和XHTML中也是區(qū)分大小寫的，如果你一定要大小寫混合寫，請仔細(xì)確認(rèn)你在CSS的定義和XHTML里的標(biāo)簽是一致的。