BEM命名法

简述

试想在一个html页面中引入各种外部css样式文件，如果外部的样式的命名不能确定，那么就不能保证该html页面内样式没有命名冲突。 而对于一个UI组件库，我们可以通过css命名规范来统一控制样式，来解决上面这个问题。

例如：
将css的一个职责命名为 .block{} ，而其子职责可以表示为 .block1-block2{} ；
若属于同一职责里的功能，则可命名为 .block__element{} ；
若是该选择器的功能有不同形态，则可命名为 .block--modifier{} 。

Element UI示例

.el-input,
.el-input__inner {  
    cursor: pointer;
}
.el-input.is-focus .el-input__inner {  
    border-color: $--input-focus-border;
}
.el-input__icon {  
    transition: none;
}

&.el-pagination--small {  
    .btn-prev,  
    .btn-next,  
    .el-pager li {    
        margin: 0 3px;   
        min-width: 22px;  
    }
}

element-ui对BEM命名法用SCSS对上述的语法进行了封装。并且将SCSS统一放在了./packages/theme-chalk文件夹下（放在一起是为了将样式提供给用户修改并打包，即使这样做会造成编写样式代码的不便）

主要源码如下：

// config.scss
$namespace: 'el';
$element-separator: '__';
$modifier-separator: '--';
$state-prefix: 'is-';

// mixins.scss
@mixin b($block) {  
  $B: $namespace+'-'+$block !global;
  .#{$B} {  
    @content;
  }
}
@mixin e($element) {  
    ...
}  
@mixin m($modifier) {
    ...
}

@mixin when($state) {
    ...
}

@mixin pseudo($pseudo) {
    ...
}

// alert.scss
@include b(alert) {
    ...
}

采用封装好的BEM命名方法，其中设置了 namespace和以文件名作为块名的方法使冲突发生的概率大大减小，并将该混合样式编译到文档根部（比如我们遇见过需要覆盖一个库的样式，直接将对应的类名覆盖...）。