很多人在写css样式的时候都是需要什么写什么，完全没有考虑过书写顺序的问题，当然书写顺序对于我们需要的结果来说没有任何影响，写的再怎么杂乱无章都是浏览器要处理的问题，他只要能渲染出我们需要的结果即可。但是当页面内容很多，结构很复杂，当数据需要从服务器加载后再添加样式时他所带来的问题就会很明显，所以有一个良好的书写顺序还是很有必要的。
再说书写顺序时我们需要先了解一下浏览器的渲染过程。浏览器渲染页面的过程大致分为以下四个步骤：
1 解析html构建dom树，解析css构建css树。
2 将dom树和css树结合形成render树。
3 根据css样式及从属关系计算每个节点的位置（包括回流和重绘）。
4 根据计算出来的规则，把内容渲染在页面上。
从渲染过程我们能看出浏览器不是一获取css样式就立马开始解析的，而是按照dom树的结构分布render样式完成步骤2，然后按照书写顺序开始遍历样式进行解析渲染进行步骤3，最后才展示到页面上的。而在这个过程中一但发现某个元素位置发生变化需要回到2，3步骤重新开始。
举个简单的例子：
width:100px;
height:100px;
background-color:red;
position:absolute;
left:0;
top:0;
当浏览器解析上述样式时，按从上而下顺序执行宽高和背景色，当执行到定位时，发现是绝对定位要脱离文档流，而上边三种样式是按默认定位不脱离文档流来执行的，所以不得不进行回流重新渲染而解除该元素在文档中的位置，然而由于他的位置影响，他所涉及的节点也会受到他回流的影响而重新排位，最终导致步骤3进行的时间太久影响步骤4的显示，影响用户体验。
所以良好的书写顺序最显而易见的优点就是减少浏览器回流，提升浏览器渲染性能，同时后续我们自己修改的时候思路也清晰，不容易被冗余样式影响。
解释一下步骤3中需要进行的回流和重绘：
回流：当元素样式改变的时候，元素的大小或位置需要发生变化，浏览器不仅仅需要重新渲染自身。常见的回流像内容和定位的修改等。
重绘：当元素样式改变的时候，元素的大小或位置不会发生变化，浏览器仅仅会应用新的样式重新渲染自身。常见的重绘像改变背景色，文字颜色等。
所以从这里又引申出另一个性能优化的方法，尽量减少回流和重绘。为了交互效果，操作dom节点是必不可少的，所以我们能做的只能尽量去减少这种操作。
关于样式书写顺序建议如下：（以下只是常见并不包括全部）
1.布局属性（position,display,float,overflow,clear,z-index）
2.自身属性（width,height,padding,margin,border,background）
3.文本属性（font相关（family，size，style，weight）,color）
4.段落属性（text相关（align，warp……）,vertical-align,while-space,letter-space）
5.css3属性（因为css3属性不兼容所有浏览器，所以建议全部放到最后书写）
以上顺序只是结合相关原理及外界经验提出的建议，有不足之处欢迎大家指出讨论。其中每小项内部顺序可按个人理解进行书写，就像2中肯定需要先有宽高再进行后续操作的吧。
圣人说过勿以恶小而为之，勿以善小而不为。前端的性能优化都是从小细节堆出来的，让自己遵循严格的规则，提高自己或者是优秀自己还是很有必要的。希望这些内容能对大家有所帮助。
