Css選擇器命名規則

作業系統版本：Windows 7

浏覽器版本：IE6,IE7,IE8,Firefox 3.6.2,Safari 4.0.4,Chrome 5.0.356.2 dev

受影響的浏覽器：所有浏覽器.

經常講到css選擇器命名規則，其實不隻是在團隊合作基礎上來講這個，每個浏覽器,IE産品，火狐，蘋果，谷歌，都會因為命名不規範會産生不同樣式..

W3C CSS2.1的 4.1.3 節中提到：辨別符（包括選擇器中的元素名，類和ID）隻能包含字元[a- zA-Z0-9]和ISO 10646字元編碼U+00A1及以上，再加連字号（-）和下劃線（_）；它們不能以 數字，或一個連字号後跟數字為開頭。它們還可以包含轉義字元加任何ISO 10646字元作為一個數 字編碼。

由于設計到的字元很多，本文隻針對字元[a-zA-Z0-9]，再加連字号（-）和下劃線（_）進行讨論。 關于CSS中允許使用的字元和大小寫資訊，請參考W3C CSS2.1的4.1.3節

在W3C CSS2.1說明文檔中，隻提到選擇器辨別符不能以數字，或一個連字号後跟數字為開頭。除 此之外，沒有相關的說明。那麼各浏覽器下的表現是否遵循這一規則呢？

看看各浏覽器下面的結果

<a href="http://www.qianduan.net/css-selectors-naming-2.html/qq-e6-88-aa-e5-9b-be20111004223132-2-2"></a>

<a href="http://www.qianduan.net/css-selectors-naming-2.html/qq-e6-88-aa-e5-9b-be20111004223247-2"></a>

觀察上表，分析各浏覽器下的表現，總結如下

<a href="http://www.qianduan.net/css-selectors-naming-2.html/qq-e6-88-aa-e5-9b-be20111004223601"></a>

從上面看到，我們可以直覺的了解到選擇器的命名在各浏覽器下的支援情況有所不同。是以，如果選擇器的命名不規範，将影響各浏覽器下，樣式渲染不一緻。比如如下代碼：

以數字開始的類名僅在IE6(Q)/IE7(Q)/IE8(Q)下被識别，而其它浏覽器下則不識别（忽略該規則）

堅持以字母開頭命名選擇器，這樣可保證在所有浏覽器下都能相容。

常用的css命名規則

頭：header

内容：content/container

尾：footer

導航：nav

側欄：sidebar

欄目：column

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

左右中：left right center

登入條：loginbar

标志：logo

廣告：banner

頁面主體：main

熱點：hot

新聞：news

下載下傳：download

子導航：subnav

菜單：menu

子菜單：submenu

搜尋：search

友情連結：friendlink

頁腳：footer

版權：copyright

滾動：scroll

内容：content

标簽頁：tab

文章清單：list

提示資訊：msg

小技巧：tips

欄目标題：title

加入：joinus

指南：guild

服務：service

注冊：regsiter

狀态：status

投票：vote

合作夥伴：partner

(二)注釋的寫法:

/* Footer */

内容區

/* End Footer */

(三)id的命名:

(1)頁面結構

容器: container

頁頭：header

頁尾：footer

(2)導航

主導航：mainbav

頂導航：topnav

邊導航：sidebar

左導航：leftsidebar

右導航：rightsidebar

标題: title

摘要: summary

(3)功能

登陸：login

功能區：shop

标題：title

按鈕：btn

目前的: current

圖示: icon

注釋：note

友情連結：link

(四)class的命名:

(1)顔色:使用顔色的名稱或者16進制代碼,如

.red { color: red; }

.f60 { color: #f60; }

.ff8600 { color: #ff8600; }

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

.font12px { font-size: 12px; }

.font9pt {font-size: 9pt; }

(3)對齊樣式,使用對齊目标的英文名稱,如

.left { float:left; }

.bottom { float:bottom; }

(4)标題欄樣式,使用”類别+功能”的方式命名,如

.barnews { }

.barproduct { }

注意事項::

1.一律小寫;

2.盡量用英文;

3.不加中杠和下劃線;

4.盡量不縮寫，除非一看就明白的單詞.

主要的 master.css

子產品 module.css

基本共用 base.css

布局，版面 layout.css

主題 themes.css

專欄 columns.css

文字 font.css

表單 forms.css

更新檔 mend.css

列印 print.css