近日看了张大神关于CSS命名规范与准则的文章（精简高效的CSS命名准则/方法与CSS样式分离之再分离），感觉受益匪浅。现在就此来总结一下：
一、关于css命名方式：
1、面向属性的命名方法：
（1）放弃 类似于help-guest-regist 就是”帮助-顾客-注册”这样的命名方法（即根据功能来命名），因为这样的命名方式不利于样式的复用（如果在用户中心也有一个类似的样式，本来可以用来复用的代码，此时只能先重新定义css样式名称再进行代码使用。因为不修改名称的话直接用在用户中心那么名字这块也是错误的，显然是错误的）。
（2）使用 面向属性的命名方法：何为面向属性的命名方法？简单来说就是根据要定义的css属性来进行命名（不要管页面什么位置，什么内容），例如：（嘿嘿，直接照搬大神的代码！果然有点不要脸）
.tr{text-align:right;}
.pb8{padding-bottom:8px;}这样的css命名起到了高效复用的结果，同时，减小了命名长度。但是这里的分离并使用面向属性的命名方法更多的是针对于网站非通用元素，如果样式简单(1~2个属性)，对其分离并使用面向属性的命名方法。， 如果使用在通用元素上面，可能出现的问题是，通用元素运用在广大的页面部分，但是某一块需要改动，就gg了。
二、精简高效CSS命名之“三无原则”
此“三无原则”就是：无ID，无层级，无标签
CSS命名就应该最简单、最直接，直捣黄龙。没有HTML标签，没有层级，原因如下：
（1）层级、ID、标签嵌套都会限制属性重用。例如：p.test 其实p是无用的，同时还限制了其他的标签使用，假如一个div也有test样式，那么样式复用又gg了。
（2）CSS文件大小
属性命名尽量在15字符以内，这样既美观又能减小css文件的大小。
（3）降低了渲染效率（这段直接抄袭大神的）
来个例子考考大家（以后我面试别人可能就会考这题），HTML如下：
<div id="test">
<ul class="test"></ul>
</div>现在要给这里的ul标签一个样式，比如说padding-left:25px;那么下面四种写法哪个渲染速度最快？
#test .test{}， ul.test{}，#test ul{} 以及.test{}。如果单纯的ul与.test PK，我还真拿不定谁的渲染速度更快些。但是，一旦牵扯到层级与标签，我100%确定，.test这种最直接的命名方式渲染效率是最高的。要知道，CSS渲染元素和使用JavaScript获取页面元素那是完全不一样的。如果是使用JavaScript获取DOM元素，则#test ul{}速度是最快的，先id获取，再tag获取，这些可都是JavaScript内置的方法。但是，CSS的渲染方式则是属于外太空系的了，《高性能网站进阶指南》一书曾提到CSS的渲染方式是“从右往左”渲染的，就拿#test ul{}举例，先渲染页面上所有的ul标签，再去寻找id为test的元素，所以，出现#test div{}这种写法的人都是傻×的，页面先渲染id为test的元素？非也！先渲染页面上所有的div，再去寻找其老爸有没有id为test的元素。由于这种渲染差异最大就200~300毫秒（补充：这里的差异不是说单纯一个样式的差异，而是这些写法泛滥的页面的全部渲染，其渲染差异数据可以参见“翻译-不同CSS技术及其CSS性能”一文），我们人一般是感觉不到的。所以，长久以来，也都不以为然。但是，我是绝对容不下这种写法的，还有，要是让我看到类似于ul#test{}这样子的命名，不好意思，面试肯定过不了。
所以，CSS命名，只要出现了层级，出现了标签，就是一次额外的渲染，层级越多，渲染的开销也就越大，这就是为什么一些前辈的文章会建议要尽量避免过深的层级。这也是为什么要“无层级”，“无标签”。
对于原则第一条“无ID”，其实与性能没有多大关系，只是一般ID都与JavaScript有奸情，如果再牵扯到CSS样式，如此复杂的三角关系，日后不好处理啊。
三、总结
关于样式分离要先权衡，何时分离，哪些要分离？不能一味的全部分离也不能都不分离。
还有一篇CSS的样式合并与模块化