持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第16天，点击查看活动详情
1.背景
公司项目中，一般采用less预编译器作为css的开发
创建以下几个less文件：
index.less用于浏览器样式重置和基础公共样式
variable.less主要存放变量，如颜色变量，尺寸变量等
element-reset.less用于element的样式覆盖
但是，用的最多的还是嵌套书写，嵌套的书写虽然简单方便，也带来了不少问题，特别是初级前端，面对前任留下的代码，便认为如此，以至于像俄罗斯套娃一样，一套又一套，后续再想改变样式，只能继续套，不加思索，简单最好？
如下图，（图1与图二，没有关联）
2.结论
浏览器的CSS解析器解析css文件时，对CSS规则是从右到左匹配查找，如果选择器嵌套层数太多会造成CSS Tree加载变慢
和影响回流重绘效率，最终影响渲染速度
3.原因
渲染
1、渲染工作开始：从用户在浏览器地址栏输入URL到请求到HTML文本，浏览器开始解析html代码，并请求html代码中的js，css，图片等资源，渲染工作开始；
2、根据解析的html，构建一颗DOM树
3、对css进行解析，生成CSSOM规则树；在这个过程中，css规则（css selector）会从右向左匹配查找，如果层级嵌套过多，过度层叠，执行的速度也就越慢。
4、将DOM树和CSSOM树合并生成渲染树；
把DOM树和CSS树组合构建的过程就是解析CSS选择器和DOM元素一一对应的过程；
css规则（css selector）从右至左的解析方式能最快速的精确定位，减少检索次数。
DOM树、CSSOM树和渲染树三者的构建并无先后条件和先后顺序，并非完全独立而是会有交叉并行构建的情况。因此会形成一边加载，一边解析，一边渲染的工作现象。
渲染树生成后，进入绘制阶段
进入绘制阶段，遍历渲染树，调用渲染器的paint()在屏幕上绘制内容。
根据渲染树布局计算样式，即每个节点在页面中的布局、尺寸等几何属性。
HTML默认是流式布局，CSS和JS会打破这种布局，改变DOM的几何属性和外观属性。在绘制过程中，根据渲染树布局，再根据布局绘制，这就是常听常说的回流重绘。
在这个过程中，如果css层叠过多，会影响回流重绘的效率
回流必定引发重绘，重绘不一定引发回流
调用 GPU 绘制,将回流重绘生成的图层逐张合并并显示在屏幕上
优化
层叠过多的样式，一是导致渲染效率慢，二是不利于样式维护，公共样式代码的增加
所以尽量保证css选择器层级扁平，建议嵌套不超过3层