本篇文章主要介绍了"面向属性的CSS命名"，主要涉及到CSS,面向方面的内容，对于HTMLjrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播感兴趣的同学可以参考一下：
自从开始做前端开发以来，我发现在开发页面的时候，总是有一个问题十分影响自己的开发效率，这个问题就是css的命名，主要是指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属性类即可：
<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或者博客，因为他会不断地优化自己的东西）：
