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属性声明顺序
推荐的样式编写顺序:
- Positioning
- Box model
- Typographic
- 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)