BEM 理论知识点

BEM 架构是什么？

什么是BEM？

BEM 架构是对前端样式命名的规范化，顾名思义，BEM 由块【block】、元素【element】、修饰符【modifier】组成，其主要作用是方便开发团队对前端项目的样式命名进行统一化处理，加强后期的维护工作。

浅谈 BEM 架构组成

BEM代表 “块（block）,元素（element）,修饰符（modifier）”,我们常用这三个实体开发组件。

块【block】

块可以理解为一个作用域标签，附有独立实体的意义，例如我们常常将一个页面的头部命名为 header、内容命名为 content 等等，这在 BEM 架构中采用 - 横杠来连接，常见的有 ElementUI 中用来代表一个表单块的 el-form。

元素【element】

元素可以理解为块中的子项，没有独立实体的意义，但有一定的语义，例如我们常常将一个列表项命名为 item、头部的标题命名为 title 等等，这在 BEM 架构中采用 __ 双下划线来连接，常见的有 ElementUI 中用来代表一个表单项的 el-form__item。

修饰符【modifier】

修饰符可以理解为块或元素的一个额外标记，主要用来表示一个特定的外观或行为，例如我们常常用绿色来表示一个成功的提示、黄色来表示一个警告的提示等等，这在 BEM 架构中采用 -- 双横杠来连接，常见的有 ElementUI 中用来代表一个成功的按钮 el-button--success。

BEM命名规则

命名规则

[block]
[block]__[element]--[modifier]
[block]--[modifier]
[block]__[element]

__ 双下划线用于连接 block 与 element
-- 双连字符用于连接 modifier
-单连字符用于连接由多单词组成的名字，如.box__goods-image--big

BEM命名的优势

可以获得更多的描述和更加清晰的结构，从其名字可以知道某个标记的含义。通过查看 HTML 代码中的 class 属性，就能知道元素之间的关联。

优势

样式隔离，避免样式污染
代码更容易覆盖
代码易读

应用

mixins.scss

css

$namespcae: 'qw' !default;
$block-sel: "-" !default;
$elem-sel: "__" !default;
$mod-sel: "--" !default;

// BEM
@mixin b($block, $selector: "") {
 $B: $namespace + $common-separator + $block !global;

 .#{$B + $selector} {
   @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 +
     $selector +
     $modifier-separator +
     $unit +
     ","};
 }

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

@mixin configurable-m($modifier, $E-flag: false) {
 $selector: &;
 $interpolation: "";

 @if $E-flag {
   $interpolation: $element-separator + $E-flag;
 }

 @at-root {
   #{$selector} {
     .#{$B + $interpolation + $modifier-separator + $modifier} {
       @content;
     }
   }
 }
}

@mixin spec-selector(
 $specSelector: "",
 $element: $E,
 $modifier: false,
 $block: $B
) {
 $modifierCombo: "";

 @if $modifier {
   $modifierCombo: $modifier-separator + $modifier;
 }

 @at-root {
   #{&}#{$specSelector}.#{$block
     + $element-separator
     + $element
     + $modifierCombo
     } {
     @content;
   }
 }
}

@mixin meb($modifier: false, $element: $E, $block: $B) {
 $selector: &;
 $modifierCombo: "";

 @if $modifier {
   $modifierCombo: $modifier-separator + $modifier;
 }

 @at-root {
   #{$selector} {
     .#{$block + $element-separator + $element + $modifierCombo} {
       @content;
     }
   }
 }
}

@mixin when($state) {
 @at-root {
   &.#{$state-prefix + $state} {
     @content;
   }
 }
}

@mixin extend-rule($name) {
 @extend #{"%shared-" + $name} !optional;
}

@mixin share-rule($name) {
 $rule-name: "%shared-" + $name;

 @at-root #{$rule-name} {
   @content;
 }
}

@mixin pseudo($pseudo) {
 @at-root #{&}#{":#{$pseudo}"} {
   @content;
 }
}

@mixin picker-popper($background, $border, $box-shadow) {
 &.#{$namespace}-popper {
   background: $background;
   border: $border;
   box-shadow: $box-shadow;

   .#{$namespace}-popper__arrow {
     &::before {
       border: $border;
     }
   }

   @each $placement,
     $adjacency
       in ("top": "left", "bottom": "right", "left": "bottom", "right": "top")
   {
     &[data-popper-placement^="#{$placement}"] {
       .#{$namespace}-popper__arrow::before {
         border-#{$placement}-color: transparent;
         border-#{$adjacency}-color: transparent;
       }
     }
   }
 }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172

tag.scss

css

@use "./mixins/mixins.scss" as *;

@include b(tag) {
  width: 64px;
  height: 29px;
  margin-right: 15px;
  color: #e8f4ff;
  background: #0c2647;
  box-shadow: inset 0px 0px 3px 0px #277cf0;
  border-radius: 6px;
  border: 1px solid #277cf0;

  @include m(success) {
    color: #e8f4ff;
    background: rgba(0, 255, 83, 0.3);
    box-shadow: inset 0px 0px 2px 0px #00ff53;
    border-radius: 6px;
    border: 1px solid #00ff53;
  }

  @include m(info) {
    color: #e8f4ff;
    background: rgba(75, 75, 75, 0.68);
    box-shadow: inset 0px 0px 2px 0px #76b2c9;
    border-radius: 6px;
    border: 1px solid #cacaca;
  }

  @include m(danger) {
    color: #e8f4ff;
    background: rgba(255, 58, 0, 0.52);
    box-shadow: inset 0px 0px 2px 0px #ff3a00;
    border-radius: 6px;
    border: 1px solid #ff3a00;
  }
}

BEM 理论知识点 ​

BEM 架构是什么？ ​

浅谈 BEM 架构组成 ​

块【block】 ​

元素【element】 ​

修饰符【modifier】 ​

BEM命名规则 ​

BEM命名的优势 ​

应用 ​