通用約定

通用約定

標籤

• #自閉合（self-closing）標籤，無需閉合( 例如： # img input br hr 等);
• 可選的閉合標籤（closing tag），需閉合( 例如：</li> 或 </body> );
• 盡量減少標籤數；

<img src="//img.w3cschool.cn/attachments/image/cimg/google.png" alt="Google">
<input type="text" name="title">
<ul>
  <li>Style</li>
  <li>Guide</li>
</ul>
<!-- Not recommended -->
<span class="avatar">
  <img src="...">
</span>
<!-- Recommended -->
<img class="avatar" src="...">

Class 與ID

• class 應以功能或內容命名，不以表現形式命名；
• class 與id 單字字母小寫，多個單字組成時，採用中劃線-分隔；
• 使用唯一的id 作為Javascript hook, 同時避免建立無樣式資訊的class；

<!-- Not recommended -->
<div class="j-hook left contentWrapper"></div>
<!-- Recommended -->
<div id="j-hook" class="sidebar content-wrapper"></div>

屬性順序

HTML 屬性應該按照特定的順序出現以確保易讀性。

• id

• class

• name

• data-xxx

• src, for, type, href

• #title, alt

• aria-xxx, role

<a id="..." class="..." data-modal="toggle" href="###"></a>

<input class="form-control" type="text">

<img src="..." alt="...">

引號

屬性的定義，統一使用雙引號。

<!-- Not recommended -->
<span id='j-hook' class=text>Google</span>

<!-- Recommended -->
<span id="j-hook" class="text">Google</span>

巢狀

a 不允許巢狀div這種約束屬於語意巢狀約束，與之區別的約束還有嚴格巢狀約束，例如a 不允許嵌套a。

嚴格巢狀約束在所有的瀏覽器下都不被允許；而語意嵌套約束，瀏覽器大多會容錯處理，產生的文件樹可能相互不太一樣。

語意嵌套約束

• <li> 用於 <ul> 或 <ol> 下；
• <dd>, <dt> 用於 #<dl> 下;
• <thead>, <tbody>, <tfoot>, <tr> , <td> 用於 <table> 下；

##嚴格嵌套約束

• inline-Level 元素，只可以包含文字或其它inline-Level 元素;<a>
裡不可以嵌套互動元素

、

、<select>等;<p>裡不可以嵌套區塊級元素