Css样式书写顺序

我不知道是否有人严格按照一定的顺序来书写css的样式，可以说几乎都是需要什么样式就加什么样式，完全没有考虑过样式属性书写的顺序对性能有什么影响。

我一直坚信，前端的性能优化都是从细节堆出来的，不注意css属性的顺序确实也可以实现我们需要的各种操作，但是慢慢的让自己遵从最优的写法，提高自己或者是优秀自己还是有必要的。

讲顺序之前，我们先要知道浏览器渲染页面的过程，之前有写过一篇文章了，这边简单提一下：

1.解析HTML构建DOM树

2.解析CSS构建CSSOM树

3.将DOM树和CSSOM树合并构建render树

4.布局

5.绘制

6.重排reflow

7.重绘repaint

整体来说，页面渲染初始过程涉及到2、3、4，我们推荐的书写顺序是这样的：

位置属性：position display float left top right bottom overflow clear z-index

尺寸（自身）属性：width height padding border margin

文字属性：font-family font-size font-style font-weight font-varient color text-align vertical-align word-spacing white-space text-overflow

背景：background、border等

css3中新增属性：content box-shadow border-radius transform等

这样比较不好理解，我们讲一些例子

span{
  width: 200px;
  height: 300px;
  background: red;
  font-size: 20px;
  color: #fff;
  left: 10px;
  position: absolute;
}

初始化渲染的时候，解析到了position之后，发现元素脱离文档流了，之前解析是按照static去解析的，又要回头重新解析。

span{
  width: 200px;
  height: 300px;
  background: red;
  font-size: 20px;
  color: #fff;
  display: block;
  margin: 20px;
}

当这个样式解析的时候，一开始按照普通行内元素解析，解析到了display之后，需要回头重新按照块级元素解析，之后解析到margin之后，触发了位置的变更，进行重排。

简单说就是位置和尺寸会涉及重排，颜色等会涉及重绘，初始化过程中我们当然是尽量避免重排和重绘，所以按照顺序书写css样式，有助于性能的优化，页面的渲染。

欢迎关注Coding个人笔记 公众号