位置：首页>> 网络编程>> 网页设计>> 精简高效的CSS命名准则和方法（4）

精简高效的CSS命名准则和方法（4）

作者：zhangxinxu　来源：zhangxinxu　发布时间：2010-09-17 18:38:00　

标签：CSS,命名,方法

2. CSS文件大小

这瓜子虽小，吃多了也是可以填饱肚子的。所以，你的CSS名称不要像老太太的裹脚布一样，搞得又臭又长，如下图所示的人人网那个冗长的CSS命名吧：

你看名称的字节数已经比属性还大了，要是这些名称都在15字符以内，乖乖，这个CSS文件可以小个1~2K绝对没有问题的。你看下图这样子的命名，这样子的CSS排版是不是更舒服，更简洁。

3. 降低了渲染效率

来个例子考考大家（以后我面试别人可能就会考这题），HTML如下：

<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{}这样子的命名，不好意思，面试肯定过不了。

所以，CSS命名，只要出现了层级，出现了标签，就是一次额外的渲染，层级越多，渲染的开销也就越大，这就是为什么一些前辈的文章会建议要尽量避免过深的层级。这也是为什么要“无层级”，“无标签”。

对于原则第一条“无ID”，其实与性能没有多大关系，只是一般ID都与JavaScript有 * ，如果再牵扯到CSS样式，如此复杂的三角关系，日后不好处理啊。

第一页上一页 1 2 3

5 下一页

投稿

精简高效的CSS命名准则和方法（4）

猜你喜欢