CSS 样式书写规范
介绍
本章主要简单介绍了 CSS 样式书写顺序规范，后续还会增加其它规范（持续更新中）。
使用
推荐书写顺序如下：
- 定位属性 -
display | position | float | left | top | right | bottom | overflow | clear | z-index等 - 自身属性 -
width | height | margin | padding | border | background等 - 文字样式 -
font-family | font-size | font-style | font-weight | font-varient | color等 - 文本属性 -
text-align | vertical-align | text-wrap | text-transform text-indent | text-decoration | letter-spacing | word-spacing | white-space | text-overflow等 - css3属性 -
content | cursor | box-shadow | text-shadow | border-radius | transform等
示例：
div {
/* 定位属性 */
position: absolute;
z-index: 9;
/* 自身属性 */
width: 200px;
height: 200px;
margin: 0 auto;
border: 1px solid #ccc;
/* 文字样式 */
font-size: 16px;
color: pink;
}
目的是：减小浏览器 reflow（回流），提高浏览器渲染 DOM 的性能
原因是：
假设按照以下代码去执行
width: 100px;
height: 100px;
background-color: red;
position: absolute;
当浏览器解析到 position 的时候突然发现该元素是绝对定位元素需要脱离文档流，而之前却是按照普通元素进行解析的，所以不得不重新渲染，解除该元素在文档中所占位置，然而由于该元素的占位发生变化，其他元素也可能会受到它回流（reflow）的影响而重新排位。