前端开发工程师CSS命名规则——表现到极致

前端开发工程师css命名|前端开发者

众所周知，css 在进行命名的时候，为了避免冲突，我们都会在这个样式名前加上各种前缀，一是为了优先级的，第二就是为了避免命名冲突这个问题。

可是这样一来，无形中就增加了css 文件的大小，我们写的css 文件名就变成了，老太太的裹脚布，十分不利于网站资源优化。
如何命名才能让css发挥最大的重用性潜力呢？我们之前取名的时候，第一感觉，就是让命名更有语义化，这样一来，命名自然而然的会变长的，如何使css命名达到精简，更高效的渲染网站呢？
我看了，一篇博客，上面提到了，”面向属性的命名”这一观点，感觉很有道理，这样的话，同一属性的样式，就可以复用css了，这样的话，css 的复用性，就会被利用到漓淋尽致了，至于冲突，那就不会发生了。
样式分离为什么可以让样式的重用性放大至最大，就是因为分离后样式的命名就是样式本身。例如：

.side-item-header{padding:0 0 8px; text-align:right;}
要是我，我会对其进行分离。在实际项目时，text-align:right;这个属性早就在CSS通用样式库里面了，而padding:0 0 8px;则会以padding-bottom:8px;的形式放在网站通用样式库里了最后，CSS命名与样式会如下：
.tr{text-align:right;}
.pb8{padding-bottom:8px;}
而这里分离出来的样式又可以被其他地方使用。是不是感觉很爽。
当然，如果网站本身的架构不是对每个侧栏内容进行模块化处理的话，说实话，这里标题的分离还是有点危险的。想想看，如果那天产品经理说底部padding值要改成10像素，啊哦，如果你的网站架构不合理，含这类标题的模块到处塞，会改到你急火攻心，吐血三升而亡的。所以，对于分离，我反复强调，“千万不要对网站通用的元素进行分离”。
所以，记住精简高效的CSS命名准则之一：[color=Red]对于网站非通用元素，如果样式简单(1~2个属性)，对其分离并使用面向属性的命名方法。
[/color]

还有就是，不要进行各种不必要的前缀，要尽量做到，无id ,无层级，无标签

CSS命名就应该最简单。没有html标签，没有层级，为什么不要，有三大原因：

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

2.降低了渲染效率
来个例子考考大家（以后我面试别人可能就会考这题），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的元素，所以，[color=Red]出现#test div{}这种写法的人都是傻×的，页面先渲染id为test的元素？非也！先渲染页面上所有的div，再去寻找其老爸有没有id为test的元素。由于这种渲染差异最大就200~300毫秒（补充：这里的差异不是说单纯一个样式的差异，而是这些写法泛滥的页面的全部渲染，其渲染差异数据可以参见“翻译-不同CSS技术及其CSS性能”一文），我们人一般是感觉不到的。所以，长久以来，也都不以为然。[/color]但是，我是绝对容不下这种写法的，还有，要是让我看到类似于ul#test{}这样子的命名，不好意思，面试肯定过不了。
所以，CSS命名，只要出现了层级，出现了标签，就是一次额外的渲染，层级越多，渲染的开销也就越大，这就是为什么一些前辈的文章会建议要尽量避免过深的层级。这也是为什么要“无层级”，“无标签”。

那么问题来了，css 在命名的时候，进行无层级，无id 的话，会不会出现命名冲突呢？如何避免这个问题

那这就需要，在团队开发之前，先定义好规范，所有人的命名方法，或许采取模块化命名规则，例如：属于 广告区域的， 前面的css 都可以加上 ad-XX，这样就不会出现冲突的问题了。

前端开发工程师css命名|网站前端开发