1. 程式人生 > >CSS語義化命名及常用命名規則(推薦)

CSS語義化命名及常用命名規則(推薦)

轉自:http://beyondweb.cn/article_detail.php?id=8 (轉載後有調整)


CSS語義化命名

從上圖我們可以大概看出這裡有兩種CSS的命名方式:

1、結構化命名法;(根據位置命名

2、語義化命名法。 ( 根據功能命名 )

結構化命名法:

       根據頁面中板塊的位置而命名,如上圖中的content-left,這時如果我們想把側邊欄sidebar放在左邊,那麼這時content-left板塊卻在右邊,板塊位置與其命名完全不符,那麼我們這時就要修改頁面中的以及CSS樣式中的選擇器名字了,這樣會很不方便,尤其是當頁面結構複雜時,一會兒left,一會兒right,這樣會很不容易維護。

語義化命名法:
           根據頁面中模組的功能而命名,如頁面頭部header、導航欄nav、主體main、側邊欄sidebar、底部footer、新聞列表newsList等等,這樣整個頁面看起來就比較清晰了,維護起來也比較方便。

那麼具體來說,應該怎麼命名呢,駝峰命名法?下劃線命名法?中華線命名法?
     首先我們需要做到的是要見名知義,最好是用英文單詞或通用的縮寫來命名,
對於是用駝峰命名法還是劃線命名法,筆者建議兩種都使用。
駝峰命名法用來區別不同的單詞劃線用來表示從屬關係。
    如主導航欄,我們可以這樣命名,mainNav代表這個導航,mainNav-current表示導航處於焦點狀態,如本站的導航:


html程式碼如下:

1 2 3 4 5 6 7 <ulclass="mainNav"> <liclass="mainNav-current"><ahref="#"title="首頁">首頁</a></li> <li><ahref="#"title="HTML5">HTML5</a></li> <li><ahref="#"title="CSS3">CSS3</a></li> <li><ahref
="#"title="Javascript">Javascript</a></li> ... </ul>

另外,命名講求的就是見名知義,並且還要注意避免命名衝突,尤其是一個專案由多個人完成時,對於這個問題我們可以通過在命名前面加組員代號或姓名簡稱來解決,具體還應根據不同團隊的規範來實施。

常用的CSS命名規則

[1、檔案命名]

主要的:main.css

模組:module.css

基本共用:base.css

佈局,版面:layout.css

主題:themes.css

專欄:columns.css

文字:font.css

表單:forms.css

補丁:mend.css

列印:print.css

[2、註釋的寫法]

/* Footer */

內容區

/* End Footer */

[3、id的命名]

(1)頁面結構

容器: container

頁頭:header

內容:content/container

頁面主體:main

頁尾:footer

導航:nav

側欄:sidebar

欄目:column

頁面外圍控制整體佈局寬度:wrapper

(2)導航

導航:nav

主導航:mainNav

子導航:subNav

頂導航:topNav

邊導航:sideNav

選單:menu

子選單:subMenu

標題: title

摘要: summary

(3)功能

標誌:logo

廣告:banner

登陸:login

登入條:loginBar

註冊:regsiter

搜尋:search

功能區:shop

標題:title

加入:joinUs

狀態:status

按鈕:btn

滾動:scroll

標籤頁:tab

文章列表:list

提示資訊:msg

當前的: current

小技巧:tips

圖示: icon

註釋:note

指南:guild

服務:service

熱點:hot

新聞:news

下載:download

投票:vote

合作伙伴:partner

友情連結:friendLink

版權:copyright

[4、class的命名]

(1)顏色:使用顏色的名稱或者16進位制程式碼,如

.red{color:red;}

.f60{color:#f60;}

.ff8600{color:#ff8600;}

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

.font12px{font-size:12px;}

.font9pt{font-size:9pt;}

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

.fl{float:left;}

.mt20{margin-top:20px;}

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

.titleBar-news{ }/*新聞標題欄*/

.titleBar-product{ }/*產品標題欄*/

除特別宣告,本站所有文章均為原創,如需轉載請以超級連結形式註明出處:WEB前端開發