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

1、“无”的哲学

佛家讲究“因果报应”，有果必有应。此段看似与主题没有血缘关系，实际讲的是“因”。

我我的比较喜欢老子的道家思想，并喜欢以其思想解释学习与工做中遇到的一些问题。例如我以前写过的“中国古代道家思想与网页重构的思考”一文。

老子有云：“天下万物生于有，有生于无”。具体解释就是：天下万物都是由看得见的具体事物（“有”）产生的，而看得见的具体事物（“有”）又是由看不见的，无形无状的东西（“无”）产生的，这个看不见的“无”也就是“道”，或叫作“根”、“母”。

咱们看武侠片，常常听到“无招胜有招”这句话，这也是道家“无”之思想之体现。由于你心中没有招式，你才能有无限的可能，生成其余的招式以克敌，即 所谓以不变应万变；相反，若是你心中牢记一套“华山剑法”，当你与人交手时，势必按照此套路走，要是遇到相克之剑法，结局就是一败涂地。“无招”是一种境 界，是你功夫修炼到必定程度才能领悟到的。咱们这代人应该都看过李连杰主演的《倚天屠龙记魔教教主》，其中张三丰老头教完张无忌太极拳后问他“记住了没？”张无忌一句“全忘记了！”让人印象深入。这就是“无”的境界。

这种境界我是深有体会的。例如每逢大考以前，我老是把之前作过的题目所有忘掉，这样，考试时就能思如泉涌；反而是强记题目的作法限制了发挥。这就好 比发射炮弹，炮管里提早预装了重型炸蛋，结果战斗开始时，发现须要的是烟雾弹，此时，反而被预装的炸蛋给阻塞限制了。打篮球也有这种体会，若是心中记得的 是动做，我要这么走，而后这么作，每每表现不佳。反而是脑中什么想法也没有，全靠下意识行动，那真是所向披靡，得分如探囊取物。

可见，要想发挥更大，就须要“无”，把一些“限制的东西”统统去掉。没有限制才能发挥出最大的潜能。站在最简单，最原始的那个点上，你才能自由驰骋，应变自如。

2、名字的本质是什么

咱们有没有思考过这么一个问题：名字的本质是什么？
这个问题其实不难，名字本质上就是一个符号，用来区分人与人的。与符号同样，名字自己就蕴含着不少的信息。举个例子，个人名字：张鑫旭。其中蕴含的信息 有：我老爸也姓张，我是上午太阳刚刚升起的时候出生的，我五行缺金。一个名字，若是其蕴含的信息越多，则这个名字就越独特，也就是说，越不可能被别人使 用；相反若是这个名字很普通，例如李娜、张艳之类，就会被大规模的重用，OK，这其实没什么大不了的，咱们的惟一身份标识不是名字，而是身份证，可是，对 于CSS样式的命名，冲突与否可不是拉便便，擦个屁股就没事的。

对于CSS，为了不样式冲突，咱们总会给其赋予至关特殊的命名，或是在选择符上添加HTML标记，或是使用层级。所谓一朝怕蛇咬，十年怕井绳。一 旦咱们经历过样式冲突带来的让人吐血的麻烦后，咱们可能就会时时在避免冲突上狠作文章，所谓过犹不及，结果又是一个烂摊子，本如花似玉的黄花小闺女变成个 臃肿的肥妞。例以下面人人网的CSS命名：

我想咱们都但愿写出精简高效的CSS代码，若是CSS重用性越高，想必就越高效。这如人的名字同样，若是名字越普通，越没有含义，越容易被重用，所 以CSS要想重用性高，就须要命名简单。可是，简单的命名越容易形成样式冲突，例如.more{}。从这点上来讲，重用性与样式冲突时两个对立的矛盾体。

不过，万幸的是，这种矛盾并非不可调和的。记住一些准则/方法，CSS既能够有高度的重用性，又不会有样式冲突的困扰。下面就将介绍这些命名方法。

3、面向属性的命名方法

咱们习惯在CSS命名的时候掺杂语义，这样可让代码更易懂。例如淘宝首页“免费注册”按钮上的class名称：help-guest-regist

上面的class命名语义就很明显，独眼龙看告示——一目了然，”help-guest-regist”就是”帮助-顾客-注册”，很nice，很人性化的命名。做为在单一的首页上使用，我是很难挑出什么毛病来的。

可是，从道家“无”的哲学思想来看，语义实际上是对自身的一种束缚，越是语义强烈的命名越是没有重用性（尤为是内容语义的）。举个实际点的例子，例如人人网的右侧边栏的标题：//zxx:通常找这类反例我就喜欢找人人网还有新浪，基本上一找一个准。人人网虽然外表长得跟facebook相似，可是就CSS而言，差距不是一两个档次的。

这个标题的class名是”side-item-header”，样式以下图所示：

如今一切ok，如今设想下，若是页面中间的模块有个标题，其样式也是：

{padding:0 0 8px; text-align:right;}

那你发现前面已经有如出一辙的CSS样式后，你会怎么办。把中间的标题也用”side-item-header”这个class吗？这 里”side”就是表示“边”的意思，这就意味着这个样式用在非侧边栏就是不合理的。你能作的估计即便新命名一个class，就像是”body- item-header”，明明是一样的CSS属性，结果却不能重用（即便使用标识符组合并CSS，这里的命名也是没有重用的）。

可见命名不合理会大大限制你的CSS重用性。如何命名才能让CSS发挥最大的重用性潜力呢？答案就是“面向属性的命名”。 这种命名就是要让你把页面啊设计啊什么的统统塞到马桶里冲走，不要管页面什么位置，什么内容，there is noting, 这儿什么都没有，既然什么都没有，也就没有了任何限制，因而CSS能够自由出入于任何地方，无限重用，并且不用担忧冲突，由于“面向属性的命名”就是针对 自身属性的一种命名方式，只会overwrite，不会冲突。

相比不少同行都用过这样的命名方式，只是不够系统，不够大胆、完全，多浅尝辄止，好比像是开心网，还有时光网的CSS代码的前面一部分样式命名：

我在“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个属性)，对其分离并使用面向属性的命名方法。

4、精简高效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样式，如此复杂的三角关系，往后很差处理啊。

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

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

首先，规范。项目组全部人的命名方法，习惯都要统一。其次，也是实际的作法，同一内容，使用同一前缀。就如上面的那张图片所示，全部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的气息

6、结语

如今，来个简短的总结，精简高效的CSS命名的关键字有“分离”，“统一前缀”，方法为“面向属性的命名”，准则为“无层级、无标签”。其中，“分 离”是“面向属性命名”的基础。“面向属性命名”和“无层级、无标签”属于两个不一样的系列，一个针对短命名属性，一个针对长命名属性。可是，两个又互相依 存。没有“面向属性命名”，“无层级、无标签”命名最后是以不堪重负，HTML膨胀致死结局。而仅仅是“面向属性命名”，前端开发人员会因维护过劳喷血而 死。总之，二者缺一不可。

上述全部内容，都是根据本身的开发总结出来的东西，我的观点，经验之谈。每一个人的成长不一样，工做环境不一样，必然在看到一些问题上会有差别，欢迎交流与讨论。我资历尚浅，文中不免会有不许确的地方，欢迎指正。

个人这套准则是创建在本身的一套CSS架构上的，我本身用的是很是开心的，并且效果很是明显。可是，究竟是否适用于其余同行，我不能保证，毕竟优秀 的前端人员心中都有本身的那一套准则。个人我的建议是这样的，若是您仍是个CSS新手，或者对我文中提到的一些概念不太理解，我以为全搬过来不太合适。您 能够保留您以前那种一步一趋的写法，而后在这基础上作您肯定的改进。若是真能对您CSS的学习提供一些帮助与启示，那真是再好不过了。

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