使用实践

https://zhuanlan.zhihu.com/p/46073785

保证各个部分只有一级 BEM，原则上不会出现2层以上选择器嵌套
修饰器需要和对应的块或元素一起使用，避免单独使用。

  1. <ul class="l-grid">
  2.     <li class="l-grid__item">
  3.         <div class="c-card">
  4.             <div class="c-card__header">
  5.             </div>
  6.             <div class="c-card__body">
  7.             </div>
  8.         </div>
  9.     </li>
  10. </ul>
  1. <div class="mk-collapse">
  2.   <div class="mk-collapse-item mk-collapse-item--expanded">
  3.     <!-- 
  4.       对于折叠面板的header 层，我们可以划分一个单元格组件 mk-cell 组件 减少嵌套，当前层级可加mk-collapse-item__title class建立关联，后续的子元素归于mk-cell的层级，后续mk-cell也可独立在其他地方复用
  5.      -->
  6.     <div
  7.       class="mk-cell mk-collapse-item__title "
  8.     >
  9.       <div class="mk-cell__title">
  10.         <span>标题1</span>
  11.       </div>
  12.       <i class="mk-icon mk-cell__right-icon"></i>
  13.     </div>
  14.     <!-- 
  15.       对于分割线这类常规公告样式，我们可以直接用class ，独立出来，不必可以建立关联
  16.      -->
  17.     <div class="divider"></div>
  18.     <div class="mk-collapse-item__wrapper">
  19.       <div class="mk-collapse-item__content">Hello World</div>
  20.     </div>
  21.   </div>
  22. </div>

BEM函数

https://juejin.cn/post/6894265906596642829

  1. $namespace: 'el';   //前缀名
  2. $element-separator: '__';  //子元素连接符
  3. $modifier-separator: '--'; //块样式状态连接符
  4. $state-prefix: 'is-';   //特定状态列前缀
  2. /* BEM
  3.  -------------------------- */
  4. @mixin b($block) {
  6.   $B: $namespace+'-'+$block !global;
  8.   .#{$B} {
  9.     @content;
  10.   }
  11. }
  14. @mixin e($element) {
  15.   $E: $element !global;
  16.   $selector: &;
  17.   $currentSelector: "";
  18.   @each $unit in $element {
  19.     $currentSelector: #{$currentSelector + "." + $B + $element-separator + $unit + ","};
  20.   }
  22.   @if hitAllSpecialNestRule($selector) {
  23.     @at-root {
  24.       #{$selector} {
  25.         #{$currentSelector} {
  26.           @content;
  27.         }
  28.       }
  29.     }
  30.   } @else {
  31.     @at-root {
  32.       #{$currentSelector} {
  33.         @content;
  34.       }
  35.     }
  36.   }
  37. }
  39. @mixin m($modifier) {
  40.   $selector: &;
  41.   $currentSelector: "";
  42.   @each $unit in $modifier {
  43.     $currentSelector: #{$currentSelector + & + $modifier-separator + $unit + ","};
  44.   }
  46.   @at-root {
  47.     #{$currentSelector} {
  48.       @content;
  49.     }
  50.   }
  51. }

B

  1. @mixin b($block) {
  2.   $B: $namespace+'-'+$block !global;  //变量拼接形成对应格式的class；再使用!global将其提升为全局变量
  3.   .#{$B} {
  4.     @content;  // 使用混合；大括号后定义的样式将都会解析到这里
  5.   }
  6. }

E

  1. @mixin e($element) {
  2.   $E: $element !global;
  3.   $selector: &;
  4.   $currentSelector: "";
  5.   @each $unit in $element {
  6.     $currentSelector: #{$currentSelector + "." + $B + $element-separator + $unit + ","};
  7.   }
  8.   //实际上@each内 其实就是变量拼接，通过__符连接父级选择器和传入的子元素，
  9.   //而传入的值可以是一个，也可以是数组
  11.     //判断父级选择器是否包含'--' 'is-' ':'
  12.   @if hitAllSpecialNestRule($selector) {
  13.     @at-root {
  14.       #{$selector} {
  15.         #{$currentSelector} {
  16.           @content;
  17.         }
  18.       }
  19.     }
  20.   } @else {
  21.     @at-root {
  22.       #{$currentSelector} {
  23.         @content;
  24.       }
  25.     }
  26.   }
  27. }

例子：

  1. //执行混合；b方法的定义在这里就不重复写了
  2. @include b((card)) {
  3.   border-radius: 4px;
  4.   border: 1px solid #ebeef5;
  5.   background-color: #fff;
  6.   overflow: hidden;
  7.   color: #303133;
  8.   transition: 0.3s;
  10.   @include e(footer) {   //传入单个
  11.     padding: 20px;
  12.   }
  14.   @include e((title, body)) {  //传入数组
  15.     padding: 20px;
  16.   }
  17. }
  19. //编译后
  20. .mk-card .mk-card__footer {  //传入单个编译结果
  21.   content: "11";
  22.   padding: 20px;
  23. }
  24. .mk-card .mk-card__title,  //传入数组编译结果
  25. .mk-card .mk-card__body {
  26.   content: "11";
  27.   padding: 20px;
  28. }

例子：

  1. // 不含"--"、"is-"、 ":" 编译前  不包含，则通过@at-root跳出选择器嵌套
  2. .mk-card{
  3.   $selector: &;
  4.   @include e(footer) {
  5.     //传入单个
  6.     padding: 20px;
  7.   }
  8. }
  10. // 编译后
  11. .mk-card__footer {
  12.   padding: 20px;
  13. }
  15. // 含"--"、"is-"、 ":"   编译前 ；包含则嵌套于父级选择器下
  16. .mk-card:hover {
  17.   $selector: &;
  18.   @include e(footer) {
  19.     //传入单个
  20.     padding: 20px;
  21.   }
  22. }
  23. //编译后
  24. .mk-card:hover .mk-card__footer {
  25.   padding: 20px;
  26. }

M

  1. @mixin m($modifier) {
  2.   $selector: &;
  3.   $currentSelector: "";
  4.   @each $unit in $modifier {
  5.     $currentSelector: #{$currentSelector +
  6.       & +
  7.       $modifier-separator +
  8.       $unit +
  9.       ","};
  10.   }
  12.   @at-root {
  13.     #{$currentSelector} {
  14.       @content;
  15.     }
  16.   }
  17. }

例子：

  1. //编译前
  2. @include b(card) {
  3.   border-radius: 4px;
  4.   border: 1px solid #ebeef5;
  5.   background-color: #fff;
  6.   overflow: hidden;
  7.   color: #303133;
  8.   transition: 0.3s;
  10.   @include e(footer) {
  11.     //传入单个
  12.     padding: 20px;
  13.   }
  15.   @include m(primary) {
  16.     background: #409eff;
  17.   }
  18. }
  21. //编译后
  22. .mk-card {
  23.   border-radius: 4px;
  24.   border: 1px solid #ebeef5;
  25.   background-color: #fff;
  26.   overflow: hidden;
  27.   color: #303133;
  28.   -webkit-transition: 0.3s;
  29.   transition: 0.3s;
  30. }
  32. .mk-card__footer {
  33.   padding: 20px;
  34. }
  36. .mk-card--primary {
  37.   background: #409eff;
  38. }