css選取器命名規則:差異及可能產生的問題

文章簡介：W3C CSS2.1的 4.1.3 節中提到：標識符（包括選取器中的元素名，類和ID）只能包含字元[a- zA-Z0-9]和ISO 10646字元編碼U+00A1及以上，再加連字號（-）和底線（_）；它們不能以 數字，或一個連字號後跟數字為開頭。它們還可以包含逸出字元加任何ISO 10646字元作為一個數

作業系統版本：Windows 7

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

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

經常講到css選取器命名規則，其實不只是在團隊合作基礎上來講這個，每個瀏覽器,IE產品，Firefox，蘋果，Google，都會因為命名不規範會產生不同樣式..

一、關於選取器的命名

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說明文檔中，只提到選取器標識符不能以數字，或一個連字號後跟數字為開頭。除 此之外，沒有相關的說明。那麼各瀏覽器下的表現是否遵循這一規則呢？

請觀察如下代碼：

2324252627282930313233343536373839404142

div{width:160px;height:20px;font-size:12px;line-height:20px;background- color:yellow;} .f-1_f_{background-color:#d4d4d4;} .1{background-color:#A8A8A8;} .123456{background-color:#d4d4d4;} .2demo{background-color:#A8A8A8;} .2-demo {background-color:#d4d4d4;} .2_demo {background-color:#A8A8A8;} .-demo{background-color:#d4d4d4;} .-2demo {background-color:#A8A8A8;} ._demo {background-color:#d4d4d4;} ._2demo {background-color:#A8A8A8;} .-{background-color:#d4d4d4;} .---{background-color:#A8A8A8;} ._{background-color:#d4d4d4;} .——{background-color:#A8A8A8;} ._-{background-color:#d4d4d4;} .-_{background-color:#A8A8A8;} .-{background-color:#d4d4d4;} .---_{background-color:#A8A8A8;} .---123{background-color:#d4d4d4;} .__123{background-color:#A8A8A8;}

1234567891011121314151617181920

<divclass="f-1_f_">字母開頭</div><divclass="1">單個數字</div><divclass="123456">多個數字</div><divclass="2demo">數字開頭 + [a-z][A-Z]</div><divclass="2-demo">數字 + "-" 開頭</div><divclass="2_demo">數字 + "_" 開頭</div><divclass="-demo">連字號(-)開頭 + [a-z][A-Z]</div><divclass="-2demo">連字號(-) + 數字 開頭</div><divclass="_demo">底線(_)開頭 + [a-z][A-Z]</div><divclass="_2demo">底線(_) + 數字 開頭</div><divclass="-">單個連字號(-)</div><divclass="---">多個連字號(-)</div><divclass="_">單個底線(_)</div><divclass=" ">多個底線(_)</div><divclass="_-">底線(_) + 連字號(-)</div><divclass="-_">連字號(-) + 底線(_)</div><divclass=" -">多個底線(_) + 連字號(-)</div><divclass="---_">多個連字號(-) + 底線(_)</div><divclass="---123">多個連字號(-) + 數字</div><divclass=" 123">多個底線(_) + 數字</div>

看看各瀏覽器下面的結果

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

從上面看到，我們可以直觀的瞭解到選取器的命名在各瀏覽器下的支援情況有所不同。因此，如果選取器的命名不規範，將影響各瀏覽器下，樣式渲染不一致。比如如下代碼：

12	div{font-size:12px;background-color:yellow;width:150px;height:30px;line- height:30px;}.20fontsize{font-size:18px;background-color:#d4d4d4;}

1	<divclass="20fontsize">以數字開頭的類名</div>

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

三、如何避免受此問題影響

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

四、關於團隊合作的css命名規範

常用的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

內容：content/container

頁面主體：main

頁尾：footer

導航：nav

側欄：sidebar

欄目：column

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

左右中：left right center

(2)導航

導航：nav

主導航：mainbav

子導航：subnav

頂導航：topnav

邊導航：sidebar

左導航：leftsidebar

右導航：rightsidebar

菜單：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

友情連結：link

著作權：copyright

(四)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