但是在团队合作中，项目需要共同维护的时候，css的命名就应该遵循项目在一开始所指定的命名规范去书写，而这个规范每一个团队可能还不一样，所以对于css 的命名还是不要太纠结的比较好。
但是话说回来，如果你有个很好css命名习惯的话，对于你后期重新审视自己的项目是有好处的。
凡事都有两面性所以，决定权在你的手里
1.Less变量：@变量名
混合：在a类中使用b类的所有属性， .a{ .b()color:#fff}
嵌套：使用嵌套代替原始css的层叠，&表示当前选择器的父级
运算：+ - * /，可以对任何数字、颜色或变量进行运算
转义：
函数：Less 内置了多种函数用于转换颜色、处理字符串、算术运算等
命名空间和访问符
作用域：首先在本地查找变量和混合（mixins），如果找不到，则从“父”级作用域继承
注释： // 行注释，/.../块注释
导入：@import "library"可以导入一个 .less 文件，此文件中的所有变量就可以全部使用了, .less 扩展名，可以省略掉
2.css modules
CSS的规则都是全局的，任何一个组件的样式规则，都对整个页面有效。产生局部作用域的唯一方法，就是使用一个独一无二的class的名字，不会与其他选择器重名。 CSS Modules是通过哈希算法将类名编译，保证类名的唯一性。
声明全局规则：
灵活按需导入以便复用代码，避免样式全局污染，但不利于写组件单元测试
3.CSS bem规范
BEM - Block Element Modfier（块，元素，编辑器）
在选择器中用三种符号来表示扩展关系
-中划线 ：仅作为连字符使用，表示某个块或者某个子元素的多单词之间的连接记号。
__ 双下划线：双下划线用来连接块和块的子元素
-- 双中划线：用来描述一个块或者块的子元素的一种状态
type-block__element--modifier
Block:不是指html中的块元素，任何独立的页面元素都可以视为一个块，这个独立的块容器有一个唯一的css类名，也就是这个块的名字
Element:属于块的某部分，任何的在Block中的DOM节点，都是一个element。在一个已知的block中，所有的element在语义上都是相等的，Block下的所有Element不考虑层级嵌套关系，扁平化处理都属于Block，即连续的__下划线只能出现一次
Modifier:用于修饰块或元素，体现在外观或行为上的改变，都可作为一个修饰器，如active状态，add/edit的操作
注意事项：
1）保证各个部分只有一级B__E--M，修饰器需要和对应的块或元素一起使用，避免单独使用。不能有 .block__el1__el2 的格式
2）仅以类名作为选择器，不使用ID或标签名来约束选择器
...import'./index.less'...<divclassName="article"><divclassName="article__body"><pclassName="article__title">title</p><buttonclassName="article__button--primary"></button><buttonclassName="article__button--success"></button></div></div>//index.less文件.article{max-width:1200px&__body{padding:20px}&__title{font-weight:700}&__button{padding:5px8px&--primary{background:blue}&--success{background:green}}}
参考文献： http://www.ibm.com/developerworks/cn/web/1512_chengfu_bem/
http://www.oschina.net/translate/thoughtful-css-architecture
BEM的本质是一个css类名命名方案。由于CSS没有作用域的概念，也不像SCSS那样可以写出层级关系，所以，如果有两个类名，比如.nav和li，虽然你知道li在.nav中，你也可以写出 .nav li {} 这样的选择器，但是很多情况下我们还是希望给li专门设一个类名，这时候BEM就是一个好的方案。
所谓BEM，其实是三个单词的缩写：Block（模块）、Element（元素）、Modifier（修饰符）。
一个模块是一个独立的实体部分，就像应用的一块“积木”。一个模块既可以是简单的也可以是复合的（包含其他模块）。
命名规范：
模块名称可以由拉丁字母，数字和短划线组成。 如：.block、.form
比如搜索框和按钮组成的组件就是一个模块。
我认为的命名的最佳实践是：.xxoo，也就是用两个词组成的词组来描述这个块，比如.propertyeditor或.languageswitcher，前者意思是属性编辑器，后者是语言切换器。强行用一个词来描述的话，你会发现词根本不够用。
B和M可以直接连用，跳过E，这是允许的。
一个元素是块的一部分，具有某种功能。元素是依赖上下文的：它们只有处于他们应该属于的块的上下文中时才是有意义的。
比如，.form的input元素和button元素都是元素。
命名规范：
元素名称可以包含拉丁字母，数字，破折号和下划线。 CSS类名写成块名称加破折号加上元素名称：.block-elem，其中elem可以是直接元素标签名，也是表义的名称。
我认为的最佳实践是：比如对话框内有一个确定按钮，这个确定按钮的类名可以是：.alert-modal__button--done，其中done是修饰符，表示是“表确定的那个按钮”。修饰符在下面讲。
修饰符是块或元素上的标志。这些标志用来形容元素或块的外观、行为或状态。例如button、a标签上的active状态。
命名规范：
修饰符名称可以包含拉丁字母，数字，破折号和下划线。 CSS类名写成模块或元素的名称加上两个破折号：.block--mod或.block__elem--mod和.block--color-black。
示例：
.form__submit--disabled
我认为的最佳实践是：比如对话框内有一个确定按钮，这个确定按钮的类名可以是：.alertmodal__button--done，其中done是修饰符，表示是“表确定的那个按钮”。
从上面的实例中，我们不难发现BEM有以下特点：
BEM的精华是B、E、M，中间用几个连接符都是小事，一般单个中划线就可以了，但是，最常见的连接符是bb__ee--mm的形式，尽量遵守这种形式，当你遇到其他人写的规范的css文档的时候，可以降低阅读难度。
