/* good */
.page {
margin-right: auto;
margin-left: auto;
}
.featured {
border-color: #69c;
}
/* bad */
.page {
margin: 5px auto; /* introducing redundancy */
}
.featured {
border: 1px solid #69c; /* introducing redundancy */
}
3.3 属性书写顺序
[建议] 同一 rule set 下的属性在书写时，应按功能进行分组，并以 Formatting Model（布局方式、位置） > Box Model（尺寸） > Typographic（文本相关） > Visual（视觉效果） 的顺序书写，以提高代码的可读性。
解释：
- Formatting Model 相关属性包括：
position / top / right / bottom / left / float / display / overflow 等
- Box Model 相关属性包括：
border / margin / padding / width / height 等
- Typographic 相关属性包括：
font / line-height / text-align / word-wrap 等
- Visual 相关属性包括：
background / color / transition / list-style 等
另外，如果包含 content 属性，应放在最前面。
示例：
.sidebar {
/* formatting model: positioning schemes / offsets / z-indexes / display / ... */
position: absolute;
top: 50px;
left: 0;
overflow-x: hidden;
/* box model: sizes / margins / paddings / borders / ... */
width: 200px;
padding: 5px;
border: 1px solid #ddd;
/* typographic: font / aligns / text styles / ... */
font-size: 14px;
line-height: 20px;
/* visual: colors / shadows / gradients / ... */
background: #f5f5f5;
color: #333;
-webkit-transition: color 1s;
-moz-transition: color 1s;
transition: color 1s;
}
3.4 清除浮动
[建议] 当元素需要撑起高度以包含内部的浮动元素时，通过对伪类设置 clear 或触发 BFC 的方式进行 clearfix。尽量不使用增加空标签的方式。
解释：
触发 BFC 的方式很多，常见的有：
- float 非 none
- position 非 static
- overflow 非 visible
如希望使用更小副作用的清除浮动方法，参见 A new micro clearfix hack 一文。
另需注意，对已经触发 BFC 的元素不需要再进行 clearfix。
3.5 !important
[建议] 尽量不使用 !important 声明。
[建议] 当需要强制指定样式且不允许任何场景覆盖时，通过标签内联和 !important 定义样式。
解释：
必须注意的是，仅在设计上 确实不允许任何其它场景覆盖样式 时，才使用内联的 !important 样式。通常在第三方环境的应用中使用这种方案。下面的 z-index 章节是其中一个特殊场景的典型样例。
3.6 z-index
[建议] 将 z-index 进行分层，对文档流外绝对定位元素的视觉层级关系进行管理。
解释：
同层的多个元素，如多个由用户输入触发的 Dialog，在该层级内使用相同的 z-index 或递增 z-index。
建议每层包含100个 z-index 来容纳足够的元素，如果每层元素较多，可以调整这个数值。
[建议] 在可控环境下，期望显示在最上层的元素，z-index 指定为 999999。
解释：
可控环境分成两种，一种是自身产品线环境；还有一种是可能会被其他产品线引用，但是不会被外部第三方的产品引用。
不建议取值为 2147483647。以便于自身产品线被其他产品线引用时，当遇到层级覆盖冲突的情况，留出向上调整的空间。
[建议] 在第三方环境下，期望显示在最上层的元素，通过标签内联和 !important，将 z-index 指定为 2147483647。
解释：
第三方环境对于开发者来说完全不可控。在第三方环境下的元素，为了保证元素不被其页面其他样式定义覆盖，需要采用此做法。
4 值与单位
4.1 文本
[强制] 文本内容必须用双引号包围。
解释：
文本类型的内容可能在选择器、属性值等内容中。
示例：
/* good */
html[lang|="zh"] q:before {
font-family: "Microsoft YaHei", sans-serif;
content: "“";
}
html[lang|="zh"] q:after {
font-family: "Microsoft YaHei", sans-serif;
content: "”";
}
/* bad */
html[lang|=zh] q:before {
font-family: 'Microsoft YaHei', sans-serif;
content: '“';
}
html[lang|=zh] q:after {
font-family: "Microsoft YaHei", sans-serif;
content: "”";
}
4.2 数值
[强制] 当数值为 0 – 1 之间的小数时，省略整数部分的 0。
示例：
/* good */
panel {
opacity: .8;
}
/* bad */
pa