CSS渲染效率的一些见解
今天在蓝色理想上看到一篇文章《精简高效的CSS命名准则和方法》，仔细阅读了一遍，感觉写的很好，作者的文笔个人也比较喜欢。但是就文章的核心观点——CSS渲染效率的问题提出一点小小的个人见解。
引用原文内容：
——————————
<div id="test">
<ul class="test"></ul>
</div>
现在要给这里的ul标签一个样式，比如说padding-left:25px;那么下面四种写法哪个渲染速度最快？
#test .test{}， ul.test{}，#test ul{} 以及.test{}.
如果单纯的ul与.test PK，我还真拿不定谁的渲染速度更快些。但是，一旦牵扯到层级与标签，我100%确定，.test这种最直接的命名方式渲染效率是最高的。要知道，CSS渲染元素和使用JavaScript获取页面元素那是完全不一样的。如果是使用JavaScript获取DOM元素，则#test ul{}速度是最快的，先id获取，再tag获取，这些可都是JavaScript内置的方法。但是，CSS的渲染方式则是属于外太空系的了，《高性能网站进阶指南》一书曾提到CSS的渲染方式是“从右往左”渲染的，就拿#test ul{}举例，先渲染页面上所有的ul标签，再去寻找id为test的元素，所以，出现#test div{}这种写法的人都是傻×的，页面先渲染id为test的元素？非也！先渲染页面上所有的div，再去寻找其老爸有没有id为test的元素。由于这种渲染差异最大就200~300毫秒，我们人一般是感觉不到的。所以，长久以来，也都不以为然。但是，我是绝对容不下这种写法的，还有，要是让我看到类似于ul#test{}这样子的命名，不好意思，面试肯定过不了。
————————————
对于上面的观点，首先一点，如果考虑大量的样式表的复用性，那势必就需要在HTML文档中使用大量的class标签来为几乎每个元素指定多个class值，这里的渲染成本你考虑了吗。需要注意的是，css的渲染过程完全是在用户的客户机上进行的，现在个人电脑的运行速度，这些渲染的成本对客户电脑的影响几乎可以忽略，虽然我没有具体测试过，但是有一点可以肯定，那就是相对于渲染对客户端电脑负载的增加来说，文件的下载速度和文件体积大小才是网页加载速度最重要的参数。所以我不同意完全摒弃级联样式表的说法。当然，如果整个网站文件非常之大，本身加载速度就很慢，那可以适当在这方面做一些优化，但是绝不应该刻意的去做。
另外，对于使用面向属性的命名和面向对象的命名一说，我也有自己的观点。那就是对于小型网站来说，使用面向对象的命名标签语义化将更加有利于页面语意的理解，因为很多小站的建设就是1个人独立完成，不需要那么多人的配合，这种情况下我觉得使用面向对象的命名将更加有利于整个网站的组织和后期的修改。同时使用面向属性的命名也是确实是一个不错的选择，因为在大型网站建设的时候往往需要整个团队的配合，适当的使用一些面向属性的CSS命名确实也是一个可行的方法。但是并不推荐全部使用这样的方法，虽然提高的CSS的复用性，但是同时HTML页面代码量也会随之增加。