專業HTML5的書寫原則

 

一、一般原則

• 所有的代碼應看似出自一人之手，即使奶媽有多人。
• 嚴格執行約定的風格。
• 若風格不定，使用現有、常用風格。

二、格式

• 標簽以及屬性名稱總是小寫。
• 一行一個不連續元素。
• 每個嵌套元素使用一個額外的縮進。
• 布爾屬性無值（如checked而不是checked="checked"）。
• 屬性值總是使用雙引號引起來。
• 省略link樣式表、style以及script元素的type屬性。
• 總是包含結束標簽。
• 自閉元素(img, br)不要包含斜杠。

（每行長度保持一個最大的合理值，例如 80列）

例子:

異常和輕微的偏差
元素含有多個屬性，可以跨多行排版，以努力提高可讀性以及提供更多有用的差異。

例子:

三、屬性順序

HTML屬性應該以特定的屬性排列，（如下）這可以某種程度上反應類名是主要接口——用做CSS以及JavaScript選擇元素

1. class
2. id
3. data-*
4. 其他

例子:

四、空白

你的整個源代碼應該只存在一種風格?？瞻资褂们昂笠恢?，使用空白提高可讀性。

• 到死也不要混用空格符(spaces)和制表符(tabs)實現縮進。
• 柔和縮進(spaces)或真實制表二選一，關鍵要一站到底。（個人偏好：空格-spaces）
• 如果使用空格，選定一個縮進字符值。（個人偏好：4空格）

小提示：你可以配置編輯器“顯示不可見”(“show invisibles”)，此舉可用來消除結束行的空白，避免違背上面（堅持一種縮進）的承諾。

五、命名

命名很難，但很重要。這是開發一個可維護的代碼庫重要的組成部分，并確保您HTML和CSS/JS見有個可伸縮的接口。

• 使用清晰，周到，適當的HTML類名。名稱應該體現HTML和CSS文件的信息。
• 避免很系統地使用類名縮寫，這會讓事情變得難以理解。

下面是糟糕的命名：

這是更好一點的命名：

六、實例

含各種約定的例子：

 

---