BEM

BEM是一种命名方法，能够帮助你在前端开发中实现可复用的组件和代码共享。

BEM的意思是块(block)、元素(element)、修饰符(modifier)。

BEM 通过唯一的 block 来保证命名的唯一性。

  1. block 代表了更高级别的抽象或组件。
  2. block__element 代表.block的后代，用于形成一个完整的.block的整体。
  3. block—modifier代表.block的不同状态或不同版本，用于修饰。
  2.   air-table{} /* 块 */  
  3.   air-table__footer{} /* 元素 */  
  4.   air-table--full{} /* 修饰符 */

案例：

  1. <form class="site-search  site-search--full">
  2.     <input type="text" class="site-search__field">
  3.     <input type="Submit" value ="Search" class="site-search__button">
  4. </form>

BEM 将 css 的关注点规范为 block、element、modifier，忽略结构、忽略层级（禁用子选择器），进而换取作用域的稳定。

BEM & SCSS

在 sass 中通过使用 mixins 来添加前缀等方式来避免在 sass 中出现臭长的代码。

原文地址：https://zhuanlan.zhihu.com/p/28650879 这篇文章介绍minix 思路和一些坑点。

最简单的封装如下：

  1. // 这步比较简单就直接贴代码了
  2. $element-separator: '__';
  3. $modifier-separator: '--';
  5. @mixin b($block) {
  6.   .#{$block} {
  7.     @content;
  8.   }
  9. }
  11. @mixin e($element) {
  12.   $selector: &; // & 里面保存着上下文，在这个 mixin 中其实期待的的就是 block
  14.   @at-root { // @at-root 指规则跳出嵌套，写在最外层
  15.     .#{$selector+ $element-separator + $element} {
  16.       @content;
  17.     }
  18.   }
  19. }
  21. @mixin m($modifier) {
  22.   $selector: &;
  24.   @at-root {
  25.     .#{$selector + $modifier-separator + $modifier} {
  26.       @content;
  27.     }
  28.   }
  29. }

基于此再写 sass 代码如下：

  1. @include b(human) {
  2.   @include e(finger) {
  3.     @include m(little) {}
  4.   }
  5. }

这只是一个简单的案例，并不完善，还有很多实际中应用的坑。更详细的用法可以参考 element-ui 的源码中的应用：https://github.com/ElemeFE/element/blob/dev/packages/theme-chalk/src/mixins/mixins.scss