面向属性的CSS命名

自从开始做前端开发以来，我发现在开发页面的时候，总是有一个问题十分影响自己的开发效率，这个问题就是css的命名，主要是指css类选择器的命名。这个问题主要体现在：第一，有的内容你压根想不出用什么名字来给它命名，因为一般命名总是考虑语义化，好让其他人看到这个css类的名字就知道它是作用于哪一个内容的，但是由于网页内容的复杂性和多样性，你很难保证每个部分都能起一个合适的名字，即使你最终迫不得已想出了一个名字，也会有这个名字是否是最合适的这种纠结存在，而且最要命的是，这个命名的过程是一项非常辛苦的脑力活动，会耗费掉很多脑细胞，这一件很不值得的事情；第二，由于命名的时候是语义化的命名，这一点可能会阻碍css代码的重用，比如说某一个网页的内容用.title来描述它的样式，这个title包含了2条规则，{font-size: 14px; line-height: 20px}，此时网页的另一个内容可能需要跟这个title具有一模一样的样式，但是从另一个内容所处的网页位置来说，可能用.desc来命名才是更合适的选择，这个时候，我相信喜欢语义化命名的人肯定会把那个内容再单独起一个css类desc，然后把title的样式复制过来，结果就导致css文件中会存在两份相同的样式规则，只是命名不同而已，这样代码就重复了。

解决这个问题的方法就是采用面向属性的css命名， 把那些我们实在想不出名字的，而且没有必要起名字的，并且可以只用单一的css属性或者组合的单一css属性来描述的部分，通通都用面向属性的css类来控制样式 ，让你从烦乱的css命名的漩涡中彻底解放出来，除了提高你的工作效率，最重要的是减少你脑细胞的损耗，让你不会那么辛苦。

首先要声明，面向属性的css命名这个思想不是我的原创，它来自于张鑫旭的博客。我是当时比较纠结于css的命名问题，然后找到了他的两篇文章，对我重新认识css的命名以及如何组织全站的css有很多的帮助，这两篇文章分别是：
精简高效的CSS命名准则/方法
我是如何对网站CSS进行架构的
你可以先去通过他的文章了解这个命名思想的起源，再回来看我的一些总结跟应用。

命名方法

这个方法，简单来说，就是直接以css属性简写作为css的类名，在使用的时候，通过使用一个或组合多个这样的简写形式的css类来达到控制样式的目的。比如说网页中有一个网页内容，是一段居中的文本，大小为12px，行高为20px，段前后间距分别为10px和15px，那么就可以定义一下这些简单的属性类：

 .tc  { text-align :  center ;} 
.f12  { font-size :  12px ;} 
.lh20  { line-height :  20px ;} 
.mt10  { margin-top :  10px ;} 
.mtb15  { margin-bottom :  15px ;} 

查看更多关于面向属性的CSS命名的详细内容...