CSS語義化命名

從上圖我們可以大概看出這里有兩種CSS的命名方式：1、結(jié)構(gòu)化命名法；2、語義化命名法。

結(jié)構(gòu)化命名法：根據(jù)頁面中板塊的位置而命名，如上圖中的content-left,這時(shí)如果我們想把側(cè)邊欄sidebar放在左邊，那么這時(shí)content-left板塊卻在右邊，板塊位置與其命名完全不符，那么我們這時(shí)就要修改頁面中的以及CSS樣式中的選擇器名字了，這樣會(huì)很不方便，尤其是當(dāng)頁面結(jié)構(gòu)復(fù)雜時(shí)，一會(huì)兒left,一會(huì)兒right，這樣會(huì)很不容易維護(hù)。

語義化命名法：根據(jù)頁面中模塊的功能而命名，如頁面頭部header、導(dǎo)航欄nav、主體main、側(cè)邊欄sidebar、底部footer、新聞列表newsList等等，這樣整個(gè)頁面看起來就比較清晰了，維護(hù)起來也比較方便。

那么具體來說，應(yīng)該怎么命名呢，駝峰命名法？下劃線命名法？中華線命名法？首先我們需要做到的是要見名知義，最好是用英文單詞或通用的縮寫來命名，對于是用駝峰命名法還是劃線命名法，筆者建議兩種都使用，駝峰命名法用來區(qū)別不同的單詞，劃線用來表示從屬關(guān)系，如主導(dǎo)航欄，我們可以這樣命名，mainNav代表這個(gè)導(dǎo)航，mainNav-current表示導(dǎo)航處于焦點(diǎn)狀態(tài)，如本站的導(dǎo)航：

html代碼如下：

另外，命名講求的就是見名知義，并且還要注意避免命名沖突，尤其是一個(gè)項(xiàng)目由多個(gè)人完成時(shí)，對于這個(gè)問題我們可以通過在命名前面加組員代號或姓名簡稱來解決，具體還應(yīng)根據(jù)不同團(tuán)隊(duì)的規(guī)范來實(shí)施。

常用的CSS命名規(guī)則

[1、文件命名]

主要的：main.css

模塊：module.css

基本共用：base.css

布局，版面：layout.css

主題：themes.css

專欄：columns.css

文字：font.css

表單：forms.css

補(bǔ)?。簃end.css

打印：print.css

[2、注釋的寫法]

/*Footer*/

內(nèi)容區(qū)

/*EndFooter*/

[3、id的命名]

(1)頁面結(jié)構(gòu)

容器:container

頁頭：header

內(nèi)容：content/container