我们项目中的css代码有几个问题：
1.className命名随意，容易导致命名冲突。
2.从className并不能看出dom的关系和状态
3.各种魔法值散落在样式中，维护困难
4.没有把公共的可复用的样式代码抽离出来管理
以上问题，1和2可以用bem命名规范解决，3和4可以引入less来解决
bem
某个样式，关联dom树中的某一层的某个元素，而且这个元素每个状态的样式可能也不同，该状态下子元素的样式也可能不同。
bem命名规范把类名分为了 块、元素、状态 3部分。块和元素用__连接，块、元素与状态之间用--连接。
比如：
.person{}
.person__hand{}
.person--female{}
.person--female__hand{}
.person__hand--left{}
这些class修饰的就是 person这个块，这个块下有hand这个子元素，person有female的状态，hand有left的状态，person处在female状态的时候hand的样式也不同。
清晰明了，元素关系、状态都能清晰的表现出来，不需要去看html甚至js的代码。
再看一个栗子：
<form class="site-search site-search--full">
<input type="text" class="site-search__field">
<input type="Submit" value ="Search" class="site-search__button">
</form>
.site-search{}
.site-search--full{}
.site-search__button{}
.site-search__field{}
只看样式的话就能看出site-search这个块下有button和field两个子元素，site-search还有full这个状态。对应到dom上发现确实是这样。
这是css的className应该有的样子，bem规范可以描述清楚这些：元素关系、元素状态。
less
less的语法很多，其中最有用的我觉得有3个：嵌套、变量、混合。
嵌套：
如果没有嵌套的时候，css代码写每一层，都要把前面的className给带上，像这样：
.lesson-select-container .condition-group .search-group {
}
.lesson-select-container .condition-group .search-group .btn {
}
.lesson-select-container .condition-group .search-group .btn .primary {
}
写n层就要复制n-1次，很是痛苦，用了less以后可以支持嵌套的语法：
.a {
.b {
color:#000;
.c{
color:blue;
&:hover {
color:#fff;
}
}
}
}
less编译生成的代码如下：
.a .b {
color: #000;
}
.a .b .c {
color:blue;
}
.a .b .c:hover {
color:#fff;
}
最终代码是一样的，却能节省开发时很多的代码量，提升开发体验和代码的易维护性。
变量
代码中是有一些魔法数字的，像颜色值
.a {color: #899234;}
.b .c {background:#899234;}
.d {color:#899234;}
如果我们要做一些主题，或者经常修改一系列颜色，没有变量的话只能一个个的去修改，繁琐而且容易遗漏。
有了less的变量之后，我们可以把魔法数字从代码中抽取出来。
@darkColor: #899234;
.a{color:@darkColor;}
.b .c{background:@darkColor;}
.d{color:@darkColor;}
当我们修改这个颜色或者想要做一套主题的时候就变的简单了，只要修改变量的值就可以了。这些变量还可以集中到一起，再应用级别统一维护。
混合
css中肯定有很多写了很多次的重复代码，如果每次遇到类似的样式都重新写一次，那么不但代码臃肿，而且要修改的时候需要修改n多个地方。
less提供了mixin，可以把一些样式抽离出来，然后在需要的地方引入。
比如：
.mixin(@color) {
color-1: @color;
}
.mixin(@color; @padding: 2) {
color-2: @color;
padding-2: @padding;
}
.mixin(@color; @padding; @margin: 2) {
color-3: @color;
padding-3: @padding;
margin: @margin @margin @margin @margin;
}
.some .selector div {
.mixin(#008000);
}
支持重载和参数。
less的语法还有很多，最应该使用的是上面几个，其他一些语法见less文档： http://lesscss.cn/features/#features-overview-feature
总结
bem命名规范提升的是代码的可读性，除了命名更方便外，也能从className看出其中的dom关系，包括dom元素的几种状态。
less提升的是代码的易维护性，抽离出的公共代码，集中控制的变量以及方便书写的嵌套。
css不应该只是当作样式，应该像js代码一样更好的结构化和维护，使之达到一种易复用、易维护、易读的状态。
结合bem的命名规范 + less的几个重要语法之后的css代码：
@blockName:'block';
.font-mixin(){
font-size:12px;
font-family:'微软雅黑';
}
.@{blockName} {
&.@{blockName}--freeze{
.@{blockName}__ele{
.font-mixin;
}
}
.@{blockName}__ele{
&.@{blockName}__ele--clicked{
}
}
}
