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）