CSS的书写顺序的问题

之前写CSS的时候都是想到什么属性就写什么属性，随意的很。特别是在调试样式的时候，还会把在浏览器调试的样式直接复制到随机的位置。

虽然知道浏览器的回流和重绘都会影响渲染的性能，但是仅仅停留在了操作样式的时候，也没怎么考虑在初始写CSS的时候顺序。

于是好好的学习了一下。

CSS的书写顺序

• 定位属性：position，z-index，display，float， left， right， top， bottom，clear，clip，overflow…
• 尺寸属性：width，height，margin，padding，border，flex…
• 文字样式：font，color…
• 背景属性：background…
• 文本属性：text-align，vertical-align，text-indent，text-decoration，letter-spacing，text-overflow，word-break…
• CSS3属性：animation，transition，box-shadow，border-radius…

why？

正常我们都知道浏览器的渲染过程，就像下图

浏览器的渲染总共分为4步：

1. 解析HTML生成DOM树,解析CSS生成CSSOM规则树。
2. 将DOM树与CSSOM规则树合并在一起生成渲染树。
3. 遍历渲染树开始布局，计算每个节点的位置大小信息。
4. 将渲染树每个节点绘制到屏幕。

合理的书写CSS的顺序，主要作用在生成渲染树布局和计算大小的时候，让renderTree提前知道这个dom是在文档流里的还是脱离了文档流等，避免了渲染了前面各种属性之后，又发现需要脱离文档流，就又需要重新渲染renderTree等。