HTML命名規範

1、關於選擇器的命名

 

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節

 

2、差別及可能產生的問題

 

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

 

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

 

堅持以字母開頭命名選擇器，這樣可保證在全部瀏覽器下都能兼容。

 

4、關於團隊合做的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