CSS书写顺序优化及原理

CSS书写应该遵循如下顺序：

1. 定位属性：position  display  float  left  top  right  bottom   overflow  clear   z-index
2. 自身属性：width  height  padding  border  margin   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……

为什么是这样的顺序呢，需要了解一下回流和重构，这决定着css样式书写顺序的优化方向

文档加载完成到完全显示之间的过程：

1. 根据文档加载生成DOM树（包含display：none；节点）；
2. 在DOM树基础上根据节点的几何属性（padding、margin、width等）生成render树（不包含display：none：和head，但是包括visibility:hidden;）；
3. 在render树基础上继续渲染color、outline等样式；

     当render树上的一部分或者全部，因为大小边距等问题发生改变需要重建的过程叫做回流；

     当元素的一部分属性如背景色等发生变化，而不影响页面布局需要重新渲染的过程叫做重绘。

有了对文档加载过程的理解，我们很容易发现，要想网页加载得快，加载得流畅，就要减少浏览器回流，提升dom的性能

      在解析过程中，一旦浏览器发现某个元素的定位变化影响布局，则需要倒回去重新渲染，所以定位元素和z-index要放在最开始的位置，上来就告诉浏览器应当怎么加载。

 

关于浏览器渲染原理参考自：https://mp.weixin.qq.com/s?__biz=MzA3NTIwOTYxMw==&mid=2447522046&idx=1&sn=754ba20d30a93bb754013d59d001ef44&chksm=8b62961cbc151f0abb932aa218e00ddc512e0f9179e3e83b6f4af87ccd8dd6e679fa75b9aba8&mpshare=1&scene=23&srcid=0120TWyG73R2Ur6y1e2McZWc#rd