html與css命名規範小結

一、命名規則說明

1. 所有的命名最好都用小寫
2. 使用英文命名
3. 給每一個表格和表單加上一個唯一的、結構標記id
4. 給每個圖片加上alt標簽，優點在於圖片發生錯誤時，alt可以體現給用戶

二、相對網頁外層重要部分css樣式命名

1. wrap——用於最外層
2. header——用於頭部
3. main——用於主題內容（中部）
4. main-left——左側佈局
5. main-right——右側佈局
6. nav——網頁菜單導航條
7. content——用於網頁中部主體
8. footer——用於底部

css命名其他說明

• DIV+CSS命名小結：無論是使用“.”選擇符號開頭命名，還是使用“#”選擇符號開頭都無所謂，但我們最好遵循——主要的，重要的，特殊的，最外層的盒子用“#”選擇符號開頭命名，其他都用“.”選擇符號開頭命名，同時要考慮命名的css選擇器在html中儘量不要重覆使用調用。

三、類class的書寫規範示例

1. 字體大小，直接使用"font+字體大小"作為名稱，如：

• .font16px{ font-size：16px } ；
• .font18px{ font-size：18px } ；

1. 標題欄樣式，使用"類別+功能"的方式命名，如：

• .barnews{ } ;
• .barproduct{ } ;

1. 省略0後邊的單位，如：

• margin: 0 ;
• padding: 0 ;

四、標簽屬性命名規範

1. id：—— 連接符命名法“hello-world”
2. class：—— 連接符命名法“hello-world”
3. name：—— 駱駝式命名法“helloWorld”

五、註意事項

1. h1~h6：文章標題、內容區塊標題，根據重要性由大到小區分，h1一個頁面只出現一次
2. 文本框不使用size屬性定義寬度，而使用css的width屬性
3. 添加maxlength屬性限制輸入字元的長度
4. 把id留給後臺開發和JS使用，除此之外頁面的page id(如首頁的外層需要一個ID id=”page_index”)，頁面結構（header main footer）允許用id命名之外，其他禁止id使用在樣式表CSS命名中，一律使用class命名
5. 為了節省位元組數以及文件大小，儘量使用屬性的簡寫方式
6. 如果顏色使用16進位色值，當6個數字兩兩相等時，使用縮寫方式編寫，比如：#996600縮寫為#960

六、圖片命名

1. 背景圖片：bg001，bg002……
2. 一般圖片：img001，img002……
3. 特定圖片：如icon，logo按照具體情況命名
4. 按鈕圖片：btn-submit，btn-cancel……