HTML編碼規則、CSS屬性聲明順序--簡介

From AmazeUI:http://amazeui.org/getting-started/html-css-guide

HTML 屬性順序

HTML 屬性應當按照如下給出的順序依次排列，確保代碼的易讀性。

• class
• id, name
• data-*
• src, for, type, href
• title, alt
• aria-*, role

Class 用於標識高度可複用組件，所以應該排在首位。id 用於標識具體組件，排在第二位。

布爾值屬性

HTML5 規範中 disabled、checked、selected 等屬性不用設置值（via）。

 Copy

<input type="text" disabled> <input type="checkbox" value="1" checked> <select> <option value="1" selected>1</option> </select>

若是非要賦值，不要使用 true、false，值必須是空字符串或屬性的規範名稱，且不要在末尾添加空格。

其餘細節

• 使用 <ul>、<ol>、<dl> 組織列表，不要使用一堆 <div> 或者 <p>；
• 每一個包含附加文字的表單輸入框都應該利用 <label> 標籤，特別是 radio、checkbox元素；
• 使用 <label> 標籤包裹 radio / checkbox，不須要設置 for 屬性；
• 避免寫關閉標籤註釋，如 <!-- /.element -->，大多編輯器都支持開閉標籤高亮；
• 不要手動設置 tabindex，瀏覽器會自動設置順序。

 

CSS屬性聲明順序

推薦的樣式編寫順序：

1. Positioning
2. Box model
3. Typographic
4. Visual

因爲定位（positioning）能夠從正常的文檔流中移除元素，而且還能覆蓋盒模型（box model）相關的樣式，所以排在首位。盒模型決定了組件的尺寸和位置，所以排在第二位。

其餘屬性只是影響組件的內部（inside）或者是不影響前兩組屬性，所以排在後面:

.declaration-order { /* Positioning */ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 100; /* Box-model */ display: block; float: right; width: 100px; height: 100px; /* Typography */ font: normal 13px "Helvetica Neue", sans-serif; line-height: 1.5; color: #333; text-align: center; /* Visual */ background-color: #f5f5f5; border: 1px solid #e5e5e5; border-radius: 3px; /* Misc */ opacity: 1; }

連接的樣式請嚴格按照以下順序添加：

a:link -> a:visited -> a:hover -> a:active（LoVeHAte）