精简高效的CSS命名准则/方法（2）

猫性男孩

我在“CSS样式分离之再分离”一文中就展示过这种命名了，分离为什么可以让样式的重用性放大至最大，就是因为分离后样式的命名就是样式本身。

就拿上面人人网的标题样式举例，人人网的做法是：

.side-item-header{padding:0 0 8px; text-align:right;}

要是我，我会对其进行分离。在实际项目时，text-align:right;这个属性早就在CSS通用样式库里面了，而padding:0 0 8px;则会以padding-bottom:8px;的形式放在网站通用样式库里了（详细请参见我的“我是如何对网站CSS进行架构的”一文）。最后，CSS命名与样式会如下：

.tr{text-align:right;}.pb8{padding-bottom:8px;}

而这里分离出来的样式又可以被其他地方使用。是不是有点“吸星**”的感觉。

当然，如果网站本身的架构不是对每个侧栏内容进行模块化处理的话，说实话，这里标题的分离还是有点危险的。想想看，如果那天产品经理说底部 padding值要改成10像素，啊哦，如果你的网站架构不合理，含这类标题的模块到处塞，会改到你急火攻心，吐血三升而亡的。所以，对于分离，我反复强 调，“千万不要对网站通用的元素进行分离”。

所以，记住精简高效的CSS命名准则之一：对于网站非通用元素，如果样式简单(1~2个属性)，对其分离并使用面向属性的命名方法。

四、精简高效CSS命名之“三无原则”

此“三无原则”就是：无ID，无层级，无标签

CSS命名就应该最简单、最直接，直捣黄龙。没有HTML标签，没有层级，这些通通滚蛋，不要。为什么不要，有三大原因：
1. 限制重用
我们会使用层级(#test .test)，会使用标签(ul.test)，可能是习惯(没多想)，或是为了避免冲突。但是，我跟你说，从今以后，这种写法让他见鬼去吧（如果不是为了 改变CSS优先级的话）。正如开篇论述的哲学观点，你限制越多，越抑制了CSS的重用性。例如#test .test{}这种写法，里面的CSS重用性多大，完全限死在了id为test的元素下，哪有重用性可言；又如ul.test，我勒个去，这个ul标签十 有八九就是装饰用的，往这儿一放，同样CSS样式的div标签可以用吗？哭爹喊娘，眼泪汪汪也不管用啊。所以，相信我，层级啊，标签啊什么的，通通见鬼去 吧。要知道，层级啊，标签啊作用是什么，是用来提高CSS优先级，把那个字母长的让人发毛的”!important”干掉的。

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毫秒（补充：这里的差异不是说单纯一个样式的差异，而是这些写法泛滥的页面的全部渲染，其渲染差异数据可以参见“翻译-不同CSS技术及其CSS性能”一文），我们人一般是感觉不到的。所以，长久以来，也都不以为然。但是，我是绝对容不下这种写法的，还有，要是让我看到类似于ul#test{}这样子的命名，不好意思，面试肯定过不了。

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

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

五、“三无原则”遗留之样式冲突问题

正如上面讲的，层级，标签可以避免样式冲突，虽然“面向属性的命名”不存在冲突问题，但是，页面上很多样式是无法分离使用“面向属性的命名”的，此时，一不能有层级，二不能有标签，如果避免冲突呢？

首先，规范。项目组所有人的命名方法，习惯都要统一。其次，也是实际的做法，同一内容，使用同一前缀。就如上面的那张图片所示，所有class同一使用od前缀，这样，就绝不会与其他页面的CSS产生冲突了。

现在，还隐藏着一个会让人心存疑惑的遗留问题。如下：

上图中，很多个链接全部存放在一个标签中，全部都是a标签，按照我的“三无原则”，不能使用层级，那么，我这里的每个a标签都得附一 个.index_list_a{}这样子的命名吗，这样子repeat下来，页面HTML代码岂不是很大，直接来个.index_list_box a{}，岂不是页面HTML更加清爽。确实有理。实际上，按照我个人实践的经验，这类细小重复的列表元素的样式都是比较简单的，不要忘了，精简高效的 CSS命名准则之一的“分离与面向属性命名”，所以，对这里的a标签进行面向属性的命名，权衡后期的重用性和HTML代码开销，还是直接针对a标签进行简 单命名是最佳解决方案。

但是，不排除这类最内层标签且重复元素的样式会很复杂，此时，使用层级与标签，或许是更好的做法，但这只存在于一些非常特殊的情况。对了，我们看看点评网是如何对最内层且重复的a标签进行处理的，如下图：

点评网是使用的一个大写的”B”作为此样式，无论这里的”B”是有background之意，还是邪恶的***之意，其命名比“面向属性命名”更甚一筹，可以说是接近真正意义上的nothing，后面可以跟任意属性，用在任意页面，这就是“无”哲学，“无”的境界。//zxx:点评网的这个命名让我闻到了一点Google的气息

原创文章，转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]
本文地址：http://www.zhangxinxu.com/wordpress/?p=1098