可扩展、模块化CSS--选择器性能(翻译文)

SMACSS is becoming one of the most useful contributions to front-end discussions in years

为了做好测试性能的这个工作，我使用了诸多工具来测试网页的瓶颈在哪儿。其中包括谷歌的工具，其中涉及到一些指标。在我们说这些指标之前，我们来说下浏览器是如何解释css的。

样式解释

元素在创造时，就已经被解释
在我们的脑海中，页面是一个装着各种元素和内容的文档。但是在浏览器的眼中，它是一种流。当浏览器从服务器得到文件的一部分并且渲染它时，其实文档还没有完整的下载下来。也就是说一个元素节点已接收到就会被解释并且渲染在视窗里面。

html文档

   

      

         
Lorem Ipsum
      
      

         
Lorem Ipsum
         
Lorem Ipsum
         
Lorem Ipsum Test
      
   

浏览器是从最顶点body开始。在这个时候，浏览器认为这个节点是空的，并且没有开始解释它。这个时候浏览器要知道这个节点有什么样式？字体样式是什么，高度等等。只有这些都有了，才会渲染在屏幕上。紧接着浏览器到了有ID的div，同样的在没有得到它的样式前，它会任务这个节点是空的。得到样式，就渲染这个节点到屏幕上。这是后浏览器会根据子节点的高度或者宽度，是否要重新渲染父子节点（也有可能是因为子节点的其他属性样式）。这个过程，知道浏览器到达文档的最后一个节点。如果要在火狐浏览器中看到这整个绘制和重新绘制的过程可以到这个链接：http://youtu.be/ZTnIxIA5KGw。

CSS从右到左开始解释

浏览器决定吧样式作用到元素上，是从右到左的顺序来进行的。像body div#content p { color: #003366; }这样的样式，浏览器要把它渲染到页面，那么浏览器首先会找到p元素，紧接着浏览器顺着DOM结构查找对应的div，直到body。从这个过程可以知道，如果选择器越少，那么性能就会越高些。

样式的规则到底是什么

在谷歌网页速度的测试里头任务有四种样式是低效的：
1.后代选择器#content h3。
2.孩子选择器content > h3
3.过度使用选择器div#content > h3
4.使用像hover非链接元素div#content:hover
相比使用单命名的样式比如说ID或者class,以上四种样式规则是相对低效的。但是实践测试显示，即使使用最坏情况的样式规则和最快样式规则，相差的时间也只有40ms。关于性能的问题，只要注意到，不要太过注重就行。
原文地址：https://smacss.com/