自从开始做前端开发以来，我发现在开发页面的时候，总是有一个问题十分影响自己的开发效率，这个问题就是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，那么就可以定义一下这些简单的属性类：
|
1 2 3 4 5 |
.tc {text-align: center;} .f12 {font-size: 12px;} .lh20 {line-height: 20px;} .mt10 {margin-top: 10px;} .mtb15 {margin-bottom: 15px;} |
在页面中使用的时候，直接组合以上这些css属性类即可：
|
1 |
<p class="tc f12 lh20 mt10 mb15">…</p> |
这就是这种属性命名方法的具体使用方式。
css中有很多的属性都可以采用这种方法来命名。在张鑫旭的博客中，他把自己的这套方法总结成了一个开源的css库：https://github.com/zhangxinxu/zxx.lib.css/blob/master/zxx.lib.css。我们可以先从他这个库来了解他本人是如何组织这些不同的css属性类的，然后再来讨论这其中的一些问题。
这是他的开源库中，采用面向属性命名的全部css类（以下代码仅是为了阅读本文方便才引用，如果是想在实际工作中使用，最好是关注张鑫旭本人的github或者博客，因为他会不断地优化自己的东西）：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 rayon-striped-num" data-line="crayon-5812898a8f095762849191-168">168 169 170 171 172 人看到这个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类来达到控制样式的目的。比如说网页中有一个网页内容，是一段居中的文本，大小为12px，行高为20px，段前后间距分别为10px和15px，那么就可以定义一下这些简单的属性类：
在页面中使用的时候，直接组合以上这些css属性类即可：
这就是这种属性命名方法的具体使用方式。 css中有很多的属性都可以采用这种方法来命名。在张鑫旭的博客中，他把自己的这套方法总结成了一个开源的css库：https://github.com/zhangxinxu/zxx.lib.css/blob/master/zxx.lib.css。我们可以先从他这个库来了解他本人是如何组织这些不同的css属性类的，然后再来讨论这其中的一些问题。 这是他的开源库中，采用面向属性命名的全部css类（以下代码仅是为了阅读本文方便才引用，如果是想在实际工作中使用，最好是关注张鑫旭本人的github或者博客，因为他会不断地优化自己的东西）：
|
