CSS样式建议书写顺序及原因

查阅相关资料后，整理出符合规范的书写顺序如下

（1）定位属性：position display float left top right bottom overflow clear z-index

（2）自身属性：width height margin padding border background

（3）文字样式：font-family font-size font-style font-weight font-varient color

（4）文本属性：text-align vertical-align text-wrap text-transform text-indent text-decoration letter-spacing word-spacing white-space text-overflow 

（5）css3中新增属性：content box-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）的影响而重新排位。

所以规范的css样式书写顺序对浏览器渲染性能的帮助可以说是事半功倍！