Html/CSS属性顺序和规则

近期在折腾网站时发现有时编辑的代码样式竟然无效，通过在网上查找资料时了解到标准而完美的Html和CSS属性都是有顺序要求的。所谓仓禀实而知礼仪，衣食足而知荣辱，那些很牛的大神们写代码时应该就是在满足基本的需求上追求这种更高的层次吧。

HTML 属性顺序

HTML标签具有一些属性，比如type、class或者id等。

为了提高可读性，推荐属性按照如下顺序排列

1. class
2. id, name
3. data-*
4. src, for, type, href
5. title, alt
6. aria-*, role
7. disabled、checked或者selected

例如：

<input class="txt" name="txt" type="text" disabled>

CSS 属性声明顺序

属性排序规则

1. 全局属性 [文档流相关属性]（display, position, float, clear, visibility, table-layout）
2. 基本属性 [盒模型相关属性]（width, height, margin, padding, border）
3. 基础属性 [排版相关属性]（font, line-height, text-align, text-indent, vertical-align）
4. 颜色背景属性 [装饰性相关属性]（color, background, opacity, cursor）
5. 文字排版（font, line-height, letter-spacing, color- text-align）
6. 生成内容相关属性（background, border）

上述属性并非全部所有属性，只是一部分，分类之间使用一个空行分隔, 并不一定严格遵循上述原则。