element ui中BEM命名规则

对于element源码每一次阅读都有新的发现，这次我们来探讨一下elementui中所用的BEM命名规则

BEM 是一个简单又非常有用的命名约定。让你的前端代码更容易阅读和理解，更容易协作，更容易控制，更加健壮和明确，而且更加严密.这篇文章主要介绍了CSS BEM 命名规范简介。Bem 是块（block）、元素（element）、修饰符（modifier）的简写，由 Yandex 团队提出的一种前端 CSS 命名方法论。

大家有没有那种取名选择症，每一次给元素取名就是对自己的一次折磨，每一次都要想的绞尽脑汁，BEM就是解决这个问题的解，试项目css可读性提高，避免样式污染，提高项目工程化，这就是BEM的魅力。
首先我们先来看一看elementui源码，BEM在packages/theme-chalk/src/mixins/mixins.scss中，下面直接上代码，首先先要了解一些scss语法。

1、!default和!global
!default用来定义局部变量，!global可以把局部变量转全局变量

#main {
  $width: 5em !global;
  width: $width;
}
#sidebar {
  width: $width;
}
//编译后
#main {
  width: 5em;
}
#sidebar {
  width: 5em;
}

2、混入：@mixin、@include
@mixin用来定义代码块、@include引入

@mixin color-links {
    color: blue;
    background-color: red;
}
span {
   @include color-links;
}
// 编译后
span {
  color: blue;
  background-color: red; 
}

3、@content 向混合样式中导入内容
从获取@include{}中传递过来的所有内容导入到指定位置

@mixin apply-to-ie6-only {
  * html {
    @content;
  }
}
@include apply-to-ie6-only {
  #logo {
    background-image: url(/logo.gif);
  }
}
// 编译后
* html #logo {
  background-image: url(/logo.gif);
}

4、@at-root 跳出嵌套
跳出到和父级相同的层级

.block {
    color: red;
    @at-root #{&}__element {
        color: blue;
    }
    @at-root #{&}--modifier {
        color:orange;
    }
}
// 编译后
.block {
   color: red;
}
.block__element {
   color: blue;
}
.block--modifier {
  color: orange;
}

5、@each in 遍历列表

@each $animal in puma, sea-slug, egret, salamander {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}
// 编译后
.puma-icon {
  background-image: url('/images/puma.png'); }
.sea-slug-icon {
  background-image: url('/images/sea-slug.png'); }
.egret-icon {
  background-image: url('/images/egret.png'); }
.salamander-icon {
  background-image: url('/images/salamander.png'); }

6、@if @else 条件判断

p {
  @if 1 + 1 == 2 { border: 1px solid; }
  @if 5 < 3 { border: 2px dotted; }
  @else  { border: 3px double; }
}
// 编译后
p {
  border: 1px solid; 
}

7、sass内置函数

1. map-has-key
   map-has-key($ map,$ key) 函数将返回一个布尔值。当 $ map 中有这个 $ key，则函数返回 true，否则返回 false。 通过map-get($ map,$ key)获取$ key对应的值

$map: ('xs' : '200px', 'sm': '100px');
$key: 'xs';
@if map-has-key($map, $key) {
  @debug map-get($map, $key) // 200px
}

2） unquote
unquote($string)：删除字符串中的引号

@debug unquote('Hello Sass!') // Hello Sass!

3） inspect
inspect($value)函数返回 $value 的字符串表示形式

@debug inspect(null); // "null"
@debug inspect(('width': 200px)); // "('width': 200px)"

4） str-index
inspect($str, $value)返回字符串的第一个索引位置(索引从1开始)，如果字符串不包含该子字符串，则返回 null

@debug str-index("sans-serif", "ans"); // 2

5） str-slice
str-slice($str, $beginIndex, $endIndex) 截取字符串的指定字符

@debug str-index("(.el-message)", 2, -2); // .el-message

原文链接：https://blog.csdn.net/m13837120071/article/details/126208195

下面是BEM的源码对照这上面的看

$namespace: 'el'; // 所有的组件以el开头，如el-input
$element-separator: '__'; // 元素以__分割，如el-input__inner
$modifier-separator: '--'; // 修饰符以--分割，如el-input--mini
$state-prefix: 'is-'; // 状态以is-开头，如is-disabled

@mixin b($block) {
  $B: $namespace+'-'+$block !global;

  .#{$B} {
    @content;
  }
}

@mixin e($element) {
  $E: $element !global;
  $selector: &;
  $currentSelector: "";

  @each $unit in $element {`在这里插入代码片`
    $currentSelector: #{$currentSelector + "." + $B + $element-separator + $unit + ","};
  }

  @if hitAllSpecialNestRule($selector) {
    @at-root {
      #{$selector} {
        #{$currentSelector} {
          @content;
        }
      }
    }
  }

  @else {
    @at-root {
      #{$currentSelector} {
        @content;
      }
    }
  }
}

@mixin m($modifier) {
  $selector: &;
  $currentSelector: "";

  @each $unit in $modifier {
    $currentSelector: #{$currentSelector + & + $modifier-separator + $unit + ","};
  }

  @at-root {
    #{$currentSelector} {
      @content;
    }
  }
}

看到这边相信大家对BEM有了一点了解，下面我们会介绍一下怎么使用，首先我们也看elementui源码，会通过注释的方法解释用法

@include b(button) {//编译后为el-button
	@include e(title){//编译为el-button__title
	  	@include m(primary) {//编译为el-button__title--primary
  		}
	}
  	@include m(primary) {//编译为el-button--primary
  	}
}