关于该如何给CSS命名

说到CSS命名，其实里面还有有很多思考的空间的。
经过我短浅的见识，以下谈谈我对于CSS命名的一些了解和见解。

其中，我发现有两种风格对立的命名方法。

• 面对元素命名

  这是一种比较普遍的做法。
  给元素设定类名的时候，尽可能的语义化，贴近元素本身。
  比如在给左边栏的头部空间定义类名的时候，
  可能会做出 .side-left-header 这样的类名，
  这样命名的好处是，样式表只用一个类名就可以定位元素，
  而且一眼就能看出这是为哪个元素设定样式，
  维护起来比较方便，省去很多查找时间。
  但是缺点也比较明显，
  类名太长，有时候可能类名比要设定的属性还要长。
  另外就是复用性的问题，
  若当有另一个元素，也与它有相同的属性表现，
  又要重新设置一个类名，并且内容还是一样的。
  这听起来就比较恶心了吧。

• 面对属性命名

  而另一个与之相反的方案，
  就是把CSS属性都打散，
  为一种属性设置设置一个类名，比如

  .fs16 { font-size: 16px; }
  .fs20 { font-size: 20px; }
  .m10 { margin: 10px; }
  .p20 { padding: 20px; }
  

  这样的CSS命名方法，
  明显缩短了类名的长度，也大大提高了代码的复用性。
  在一些属性重复比较多的项目里，把CSS文件压缩到了极致。
  但是，如果使用这样的CSS命名方式，
  HTML文档中也多出了许多class代码。
  而且当需要修改样式时，是需要查找HTML文件修改的。

• 还有一种风格

  另外，还有一种 “ 超脱于尘世 ” 的命名方法。

  .a {height: 100px;}
  .b {font-size: 2em;}
  .z {background: none;}
  

  这种命名简直就是简单粗暴，
  每一个类名相当于只是一个标志，并没有任何意义。
  这种极度简洁的命名方式其实还是可以接受的。
  在一些不需要语义，不需要考虑维护性的地方，
  可以带来相当大的便利甚至眼前一亮。

• 综上所述，说点总结。

两种命名规则，都各有各的优点，当同时缺点也比较明显，
面对元素命名，清晰但臃肿，
面对属性命名，高效但维护成本高。

其实，两种规则看似矛盾，但我举得还是可以适当揉合
以元素命名为基础，在一些复用性比较高的属性上，
把它们提取出来，单独作为一个类，方便重复使用。

虽然说起来简单，这还是需要不少的经验和功力的，
最主要的我觉得还是这个意识吧。

应该有个大局意识，从着手之前就该有个概念，
哪些属性复用性比较高，提前把它拎出来。
我觉得我首先可以从 .clear .in-block 等元素开始。

• 最后稍稍附一些命名规范

这篇文章其实是启发自大神——张鑫旭的精简高效的CSS命名准则

同时还有另一篇文章可以参考——DIV+CSS规范命名大全集合

Wait me back