让css变得易读易维护：bem与less

我们项目中的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{
    }
  }
}