HTML 的属性顺序及 CSS的属性声明顺序

HTML 属性顺序

HTML 属性应当按照以下给出的顺序依次排列，确保代码的易读性。
class
id, name
data-
src, for, type, href
title, alt
aria-*, role*
Class 用于标识高度可复用组件，因此应该排在首位。id 用于标识具体组件，排在第二位。

布尔值属性：
HTML5 规范中 disabled、checked、selected 等属性不用设置值



1

如果非要赋值，不要使用 true、false，值必须是空字符串或属性的规范名 称，且不要在末尾添加空格。

其他细节：
使用

• 、
  1. 、

     组织列表，不要使用一堆

     或者

     ；
     每个包含附加文字的表单输入框都应该利用 标签，特别是 radio、checkbox元素；
     使用 标签包裹 radio / checkbox，不需要设置 for 属性；
     避免写关闭标签注释，如 ，大多编辑器都支持开闭标签高亮；
     不要手动设置 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