HTML+CSS命名規范總結
1.HTML部分
1.1添加必須的utf-8的字符集，並且使用HTML5的簡潔
方式：
<meta charset=”utf-8”>
1.2遵循xhtml1.0規則
1）所有標簽必須結束
2）所有標簽必須小寫
3）標簽屬性必須使用成對引號（單引號或雙引號）
4）標簽屬性必須有值：
5）所有特殊符號必須轉義
1.3標簽屬性命名規范
Id：連接符命名法“hello-world”
Class：連接符命名法“hello-world”
Name：駱駝式命名法“helloWorld”
1）表單元素的id必須加以下前綴
label： lbl text：txt password：txt textarea：txt file：txt
radio： rad checkbox：chk submit：btn reset：btn
button：btn hidden： hid
2）用於結構布局的元素id命名
主容器： main 頁頭：header 頁腳：foote 內容區域：content
LOGO： logo 主導航：main-nav 二級導航：sub-nav
3）name命名
一般用於表單元素，根據當前元素id屬性值命名，去掉id屬性值的前綴和所有連接符，使用駱駝式命名法命名，例如：id=“txt-id-card”，那么name=“idCard”。
1.4合理使用標簽，語義化結構
1）標簽合理嵌套
a ，spam ，strong ，em ，p ，h1-h6等元素不能包含：div、ul、ol、dl、p
2）嚴禁多div症、多span症、多table症，正確使用標簽表現DOM結構，在文檔去除css的情況下，任然具有結構和可讀性，以下是html標記的使用規范：
p ：文本段落 dl ：定義列表，可包括標題和內容簡介的列表
ul ：無序列表 ol ：有序列表 strong/em ：強調文本
h1-h6 ：文章標題、內容區塊標題，根據重要性由大到小區分，h1一個頁面只出現一次；
img ：圖像。必須加上alt屬性，當圖像無法顯示時，可表示圖像信息，背景和按鈕使用css處理，不使用img元素；
table ：數據網絡，規則的分欄布局，盡可能顯性的定寬和定高。
3）合理化表單結構
A）使用fieldset元素包裹相同類別的字段。
B）使用legen元素表示 字段類別名稱。
C）使用label表示字段文本，添加必要的for屬性，以在點擊字段文本時，文本框能獲得焦點。
D）文本框不使用size屬性定義寬度，而使用css的width屬性。
E）添加maxlength屬性限制輸入字符的長度。
4）嚴禁使用已在xhtml1.0中已移除的標簽
s 、i 、b 、font
1.5控制頁面默認顯示狀態
使用js來控制和切換現實的區塊、導航、tab，必須先用css處理DOM默認顯示狀態。
SEE MORE →
2
2.CSS部分
2.1Css命名規則
1）樣式類名全部用小寫，首字符必須是字母，禁止數字或其他特殊字符。由以字母開頭的小寫字母（a--z）、數字（0--9）、下划線（_）組成。
2）可以是單個單詞，也可以是組合單詞，要求能夠描述清楚模塊和元素的含義，使其具有語義化。避免使用123456...red，blue，left，right之類的（如顏色、字號大小等）矢量命名。
3）盡量用單個單詞簡單描述class名稱。
4）雙單詞或多單詞組合方式：形容詞_名詞、命名空間_名次、命名空間_形容詞_名詞。
2.2Class和ID的使用方法
把id留給后台開發和JS使用，除此之外頁面的page id（如首頁的外層需要一個ID id=“page_index”），頁面結構（header main footer）允許用id命名。其他禁止id使用在樣式表CSS命名中，一律使用class命名。
2.3命名空間
在編碼思想上，我們可以將頁面拆分成不同的層級（布局、模塊、元件）。
2.4添加文檔樣式
1）引用外部文件方式添加樣式
2）嚴禁編寫標記內代碼，比如<div style=”display:none;”>就應該寫成<div class=”hide”>,然后在樣式表中去完成樣式代碼編寫。
3）嚴禁在文檔中使用<style type=”text/css”></style>代碼塊
4）分割樣式表，降低代碼復雜性，方便管理和維護。但不分割的太細碎，應考慮以后的維護和管理。
2.5屬性簡寫
為了節省字節數及文件大小，以下屬性請使用簡寫方式：
padding ：top right bottom left； margin ： top right bottom right；
border ： style width color； border-top ：style width color；
Border-bottom ：style width color； Border-left ：style width color；
Border-color ：top right bottom left； Border-style ：top right bottom left；
Border-width ：top right bottom left； Background ：color url（image）repeat posotion；
List-style ：type position url（image）； Font-weight：400/700；
2.6縮寫16進制色值
Color和background-color的屬性值如果使用的是16進制色值，當6個數字兩兩相等時，使用縮寫方式編寫。如：#996600縮寫成#960
2.7字體
1）全局定義字體：body{font：12px arial，helvetica，sans-serif；line-height：1.5；}
2）font-family：
A）等寬字體組合：Arial，Helvetica，sans-serif；
B）不等寬（寬扁）字體組合：Verdana，Trebuchet MS，sans-serif；
C）中文字體：除非內容文本需要，不推薦強制定義
2.8頁面采用固定流式布局，使用像素（px）固定元素尺寸。
2.9添加必須的注釋
可根據全局、布局、區塊、功能等進行分類和添加注釋，方便維護和代碼搜索。
2.10CSS通用命名
（1）頁面框架命名，一般具有唯一性，推薦用ID命名
（2）模塊結構命名
（3）導航結構命名
（4）一般元素命名
SEE MORE →
3
3.圖片命名
1）背景圖片：bg001，bg002，bg003......
2）一般圖片：img001，img002，img003......
3）特定圖片：如banner，logo按照具體情況命名
4）按鈕圖片：btn_submit，btn_cancel.....
SEE MORE →
4
4.javascript部分
4.1在文檔中引用js
1）使用外部文件方式引用js；
2）將引用js的代碼集中放置在一起，可放置在</head>之前或</body>之前，嚴禁在body間分散放置；
3）使DOM結構和js代碼分離，禁止寫在標記內部；
4）如果是發布版本，請將多個穩定版本的js文件壓縮、歸類放置到單個文件內，壓縮和最小化js文件。
4.2不直接操作DOM樣式，使用已在樣式表中定義的class來操作DOM樣式
4.3DOM加載
把需要再DOM加載后立即執行的代碼封裝在同一個函數執行，不要編寫多個window.onload事件或jQuery的ready（）事件。
4.4嚴禁使用多個library庫
4.5優化iQuery代碼，提高性能：
1）選擇器從最近的ID開始繼承或直接使用ID選擇器：$（“#id tag”）；
2）選擇器在使用class前加上標簽名：$（“span.span1”）；
3）盡量使用ID選擇器代替class；
4）要獲取子元素請使用子選擇器，而不要使用后代選擇器：$（“#id>span”）；
5）緩沖jQuery對象，不要在代碼中重復出現相同的選擇器：var btn=$（“#id”）；
6）使用data（）存儲臨時變量；
7）限制直接操作DOM，在更新DOM前應該准備好需要的東西；
8）避免使用live（）方法綁定事件；
9）在父級元素監聽事件，對目標元素進行操作；
$（“#id”）.click（function（e）{var input=$(e.target);}）；
10）推遲加載拖放、動畫、視覺特效等代碼，把可能會影響頁面加載速度的代碼綁定到$（window）.load（）事件中。