CSS語義化命名

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

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

打?。簆rint.css

[2、注釋的寫法]

/*Footer*/

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

/*EndFooter*/

[3、id的命名]

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

容器:container

頁頭：header

內(nèi)容：content/container

頁面主體：main

頁尾：footer

導(dǎo)航：nav

側(cè)欄：sidebar

欄目：column

頁面外圍控制整體布局寬度：wrapper

(2)導(dǎo)航

導(dǎo)航：nav

主導(dǎo)航：mainNav

子導(dǎo)航：subNav

頂導(dǎo)航：topNav

邊導(dǎo)航：sideNav

菜單：menu

子菜單：subMenu

標(biāo)題:title

摘要:summary

(3)功能

標(biāo)志：logo

廣告：banner

登陸：login

登錄條：loginBar

注冊：regsiter

搜索：search

功能區(qū)：shop

標(biāo)題：title

加入：joinUs

狀態(tài)：status

按鈕：btn

滾動：scroll

標(biāo)簽頁：tab

文章列表：list

提示信息：msg

當(dāng)前的:current

小技巧：tips

圖標(biāo):icon

注釋：note

指南：guild

服務(wù)：service

熱點(diǎn)：hot

新聞：news

下載：download

投票：vote

合作伙伴：partner

友情鏈接：friendLink

版權(quán)：copyright

[4、class的命名]

(1)顏色：使用顏色的名稱或者16進(jìn)制代碼,如

.red{color:red;}

.f60{color:#f60;}

.ff8600{color:#ff8600;}

(2)字體大小,直接使用"font+字體大小"作為名稱,如

.font12px{font-size:12px;}

.font9pt{font-size:9pt;}

(3)對齊樣式,使用對齊目標(biāo)的英文名稱或單詞縮寫,如

.fl{float:left;}

.mt20{margin-top:20px;}

(4)標(biāo)題欄樣式,使用"類別+功能/分類"的方式命名,如

.titleBar-news{}/*新聞標(biāo)題欄*/

.titleBar-product{}/*產(chǎn)品標(biāo)題欄*/

規(guī)范化命名是為了讓其他人更方便的閱讀，希望web前端設(shè)計(jì)師們能夠遵循一下，小伙伴們感激不盡~~

最新評論