web前端開發:html與css命名規範

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

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

wrap——用於最外層

header——用於頭部

main——用於主題內容（中部）

main-left——左側布局

main-right——右側布局

nav——網頁菜單導航條

content——用於網頁中部主體

footer——用於底部

css命名其他說明

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

三、類class的書寫規範示例

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

.font16px{ font-size：16px } ；

.font18px{ font-size：18px } ；

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

.barnews{ } ;

.barproduct{ } ;

省略0後邊的單位，如：

margin: 0 ;

padding: 0 ;

四、標籤屬性命名規範

id：—— 連接符命名法「hello-world」

class：—— 連接符命名法「hello-world」

name：—— 駱駝式命名法「helloWorld」

五、注意事項

h1~h6：文章標題、內容區塊標題，根據重要性由大到小區分，h1一個頁面只出現一次。 文本框不使用size屬性定義寬度，而使用css的width屬性。

添加maxlength屬性限制輸入字元的長度。

把id留給後台開發和JS使用，除此之外頁面的page id(如首頁的外層需要一個ID id=」page_index」)，頁面結構（header main footer）允許用id命名之外，其他禁止id使用在樣式表CSS命名中，一律使用class命名。

為了節省位元組數以及文件大小，盡量使用屬性的簡寫方式。

如果顏色使用16進位色值，當6個數字兩兩相等時，使用縮寫方式編寫，比如：#996600縮寫為#960

六、圖片命名 背景圖片：bg001，bg002…… 一般圖片：img001，img002…… 特定圖片：如icon，logo按照具體情況命名。 按鈕圖片：btn-submit，btn-cancel……