HTML命名規范


一、關於選擇器的命名
 
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說明文檔中,只提到選擇器標識符不能以數字,或一個連字號后跟數字為開頭。除此之外,沒有相關的說明。那么各瀏覽器下的表現是否遵循這一規則呢?
 
三、如何避免受此問題影響
 
堅持以字母開頭命名選擇器,這樣可保證在所有瀏覽器下都能兼容。
 
四、關於團隊合作的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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM