css样式书写顺序及原理

浏览器对 CSS 的匹配原理

浏览器CSS匹配不是从左到右进行查找，而是从右到左进行查找。
例如： #divBox p span .red{color:red;}
浏览器的查找顺序如下：
先查找 html 中所有 class=’red’ 的 span 元素，找到后，再查找其父辈元素中是否有p元素，再判断p的父元素中是否有 id 为 divBox 的 div 元素，如果都存在，则 CSS 匹配上

CSS选择器解析的顺序是从右至左，css源文件经过浏览器解析后会检索html树，如果从左往右匹配，当匹配失败时会回溯，然后继续往下匹配，反复如此很消耗系统资源的，从右往左匹配时，会首先找到要匹配的元素，如果不满足选择器匹配规则直接抛弃该元素，最后将css属性合并到剩下的元素

CSS推荐的书写顺序

书写顺序：按照下述1 2 3 4 5的顺序进行书写

定位属性：display position float / left top right bottom / overflow clear z-index
自身属性：width height / padding border margin / background
文字样式：font-family font-size font-style font-weight font-varient / color
文本属性：text-align vertical-align / text-wrap text-transform text-indent text-decoration letter-spacing word-spacing white-space text-overflow
css3中新增属性：content / box-shadow border-radius / transform...

目的： 减少浏览器reflow（回流），提升浏览器渲染dom的性能。
原理： 浏览器的渲染流程为:
第一步：解析html构建dom树，解析css构建css树：将html解析成树形的数据结构，将css解析成树形的数据结构
第二步：构建render树：DOM树和CSS树合并之后形成的render树。
第三步：布局render树：有了render树，浏览器已经知道那些网页中有哪些节点，各个节点的css定义和以及它们的从属关系，从而计算出每个节点在屏幕中的位置。
第四步：绘制render树：按照计算出来的规则，把内容渲染在屏幕上。
css样式解析到显示至浏览器屏幕上就发生在2,3,4步骤，可见浏览器并不是一获取到css样式就立马开始解析而是根据css样式的书写顺序将之按照dom树的结构分布render样式，完成第2步，然后开始遍历每个树结点的css样式进行解析，此时的css样式的遍历顺序完全是按照之前的书写顺序。
在解析过程中，一旦浏览器发现某个元素的定位变化影响布局，则需要倒回去重新渲染正如按照这样的书写书序：

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

当浏览器解析到position的时候突然发现该元素是绝对定位元素需要脱离文档流，而之前却是按照普通元素进行解析的，所以不得不重新渲染，解除该元素在文档中所占位置，然而由于该元素的占位发生变化，其他元素也可能会受到它回流的影响而重新排位。最终导致3步骤花费的时间太久而影响到4步骤的显示，影响了用户体验。
所以规范的的css书写顺序对于文档渲染来说一定是事半功倍的，虽然现在大家的计算机性能过剩，即使乱写一通，浏览器也能正确加载显示出来，但是规范书写css是作为一名前端web工程师的基本素养。