css精简命名

想写写前言啥的，发现自己是前言无能星人。

简单吐吐槽好了，来到新公司，接手公司之前的项目，我想着也就是改改bug，慢慢来吧，粗略看了看这个项目的代码，目前仅看了html和css样式的，忍不住吐血三升。

html标签一层包着一层，好多标签在我看来是多余的，毫无作用的。

css样式层级太深就算了，命名居然是用拼音的。我安慰自己，拼音多好啊，不用担心命名冲突，多好。

看了好几个css样式文件后，发现css样式“层级+命名”的字节数都快和css属性持平了。心塞塞。

正好领导安排我按照命名规范整理css样式以及清理html代码。我忍不住泪流满面。这是重写了吧，是重写了吧！

一、精简命名

命名不合理会大大限制你的CSS重用性，我想我们都希望写出精简高效的CSS代码，如果CSS重用性越高，想必就越高效。

如何命名才能让CSS发挥最大的重用性潜力呢？我个人倾向于“面向属性命名”。

面向属性的命名方式，需要我们将属性进行分离。

示例：

如果是我，我会采用以下方式：

.pr{

position:relative;

}

.fl{

float:left;

}

.a{

display:inline-block;

padding:0 15px 0 25px;

}

这样分离出来的样式 .pr 和 .fl  就可以在其他地方复用。

当然，如果网站本身的架构不是对每个侧栏内容进行模块化处理的话，分离还是有点危险的。想想看，如果那天产品经理说底部padding值要改成10像素，啊哦，如果你的网站架构不合理，有这种命名的东西到处都是，而你记不住，那就会改到你急火攻心，吐血三升而亡的。所以，对于分离，要注意“千万不要将网站的通用样式进行分离”。

二、精简命名的法则

精简命名遵循两大法则：无层级、无标签

CSS命名就应该最简单、最直接。为什么不要层级？为什么不要标签？我将从以下三点进行说明。

1.    限制重用

我们会使用层级(.div .p)，会使用标签(p.p)，可能是习惯(没多想)，或是为了避免冲突。如果不是为了改变CSS优先级的话，这种命名方式还是尽量少用。你限制越多，越抑制了CSS的重用性。例如.div .p {}这种写法，里面的CSS重用性多大，完全限死在了class为.div的元素下，根本没有重用性可言；又如p.test，这个p标签往这儿一放，同样CSS样式的div、li、span等标签就不能再使用。

2.    CSS文件大小

由上图可知，命名层级很深，css可重用性完全没有。层级+css样式命名，通篇下来，可能“层级+css命名”的字节数和你的css属性的字节数一样大。

可以看看下图这样子的命名，这样子的CSS排版是不是更舒服，更简洁。

3.    降低了渲染效率

关于浏览器渲染速度，下面举个例子大家一起讨论下：

原谅我命名毫无规范可言，重点是下面，其他的可以无视。

现在要给这里的p标签一个样式，比如说{ font-size:14px;color:#333;}，那么下面四种写法哪个渲染速度最快？

在《高性能网站进阶指南》一书曾提到CSS的渲染方式是“从右往左”渲染的，就拿.div p{}举例，先渲染页面上所有的p标签，再去寻找class名为div的元素。同理，.div.p{}也是如此。后面两种方式的渲染速度相差不大，但是p.p比.p多出了一个步骤，在渲染完.p样式后，还要去寻找判断渲染的是否是p标签。有以上分析可知，.p这种命名方式的渲染效率是最高的。

如果整个css文档都是这种写法，那么浏览器渲染差异最大就200~300毫秒。当然这个时间我们是感觉不到的。

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

三、无层级、无标签的命名规则，如何避免css样式命名冲突？

由于css样式面向属性命名，没有层级限制，没有标签限制，那么如何避免命名冲突？

1. 项目组成员遵循相同的命名规则。
2. 同一模块，使用同一前缀

示例：智造通项目中，资讯速递这个导航下，还有8个小导航。

假如我们为热点聚焦模块下的某个p标签写一个样式：

热点聚焦：Hot focus

那么，该样式名为：.hf-p{}  这个p只是代指，可根据实际内容而定

在下图中，同一类目下，存在多个a标签。此时没个a标签都使用面向对象命名的话，就显得比较累赘。很多人可能会直接.div a{}书写a标签css样式(包括我)。在综合html代码开销、css样式可重用性后，这里a标签可以使用简单命名。如class=”new-a”

总结：在实际编码中，层级可能无法避免，请诸君在层级无法避免，除了使用层级控制不能用其他方式解决问题的时候再来使用。