BEM ，一种CSS命名方式

• BEM定义
  是指B：block（块），E：element（元素），M：modifier（修饰符）；是一种CSS命名方案。

写法：

.block{}
.block__element{}
.block__element--modifier{}
.block--modifier{}

举个栗子：

.nav{}
.nav__item{}
.nav--blue{}
.nav__item--red{}

• 作用
  1、复杂甚至稍显冗长的类名 -> 极大减少了类名重复的可能性
  2、每个块里的一类元素的样式对应一个类名。如此，一类元素对应一个类名，减少了子选择器或后代选择器的使用，提升了 css 的性能。
  3、css 类名的命名更加语义化，更易懂。
  4、可复用性高，例如我们可以把主题类名 form--theme-xmas 替换，即可对应替换为别的主题样式

• 更方便地使用BEM
  less:

.form {  
  width: 12rem;  
  height: 6rem;
    
    &__input{
      font-size: 16px;
    }
    &__submit{    
      background: blue;
     &--disabled{
        background: gray;
     }
   }
}

编译后

.form {  
  width: 12rem;  
  height: 6rem;
}
.form__input {  
  font-size: 16px;
}
.form__submit {  
  background: blue;
}
.form__submit--disabled {  
  background: gray;
}

参考：

http://getbem.com/

BEM的定义：http://www.w3cplus.com/css/bem-definitions.html

为什么我们要用BEM：https://www.zybuluo.com/lxjwlt/note/155372

如何更好的使用BEM：http://www.w3cplus.com/preprocessor/getting-sass-y-with-bem.html