css编码规范及页面重绘和回流（重排）

规范的css的书写顺序：

1）位置属性(position, top, right, z-index, display, float等)
2）大小(width, height, padding, margin)
3）文字系列(font, line-height, letter-spacing, color- text-align等)
4）背景(background, border等）
5）其他(animation, transition等)

这时候你可能提出疑问，为什么要根据这种顺序书写css，我们首先要了解两个东西，第一是HTML页面渲染的机制，第二是重绘和回流（重排）。

HTML页面渲染的机制

第一步：首先，浏览器解析HTML代码并生成一个 DOM 树
//DOM节点可以分为可视化节点和非可视化节点，可视化节点 包含 div、p 等这种结构性的东西，非可视化节点 包含 script、meta 等这种在页面上显示不出来的东西，同时display：none的元素可以出现在DOM树中。

第二步：解析CSS文件，顺序为：浏览器默认样式->自定义样式->页面内的样式，形成CSSOM树。

第三步：根据CSS树和DOM树，生成一个渲染树（render tree。这个渲染树和DOM树的不同之处在于，它是受样式影响的。它不包括那些不可见的节点，即display：none不会出现。

第四步：当渲染树（render tree）生成之后，浏览器就会遍历render tree进行渲染。
此时的css样式的遍历顺序完全是按照之前的书写顺序！！

所以你发现，我们为什么把position放到最前面，举个例子：

.emample{
width: 100px;
height: 100px;
background-color: red ;
position: absolute;

我们执行第四步渲染render tree操作，render tree按照书写样式遍历，所以先渲染前两句“width: 100px;height: 100px;”，即，渲染他的宽高，这时默认他是普通元素。

解析到第四句“position: absolute;”的时候发现他其实脱离了文档流，那这个元素就要重新构建，这就叫回流/重排(reflow)。同时，因为该元素的占位发生变化，其他元素也可能会受到它回流的影响而重新排位，这时就又要发生一个回流。

发生回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树。

相应的重绘就是在回流完成之后，重新渲染这部分页面。

而其实，这些回流是完全可以避免的，也就是写的时候把position放到前面，先进行渲染。

同样的，元素的尺寸改变也会产生回流，因此我们的第二优先级是大小(width, height, padding, margin）。

附录-会产生回流的操作

1、添加或者删除可见的DOM元素；
2、元素位置改变；
3、元素尺寸改变——边距、填充、边框、宽度和高度
4、内容改变——比如文本改变或者图片大小改变而引起的计算值宽度和高度改变；
5、页面渲染初始化；
6、浏览器窗口尺寸改变——resize事件发生时；

扩展阅读-百度FEX团队编码规范

https://github.com/fex-team/styleguide/blob/master/css.md