# BEM-css类名规范
团队开发中，css相关的样式污染，依赖性高等痛点经常出现，因此有统一的css类名命名规范就很重要。本文介绍的BEM命名规范很适合基础组件开发使用
对于业务代码，可能会由于项目逐渐变大可读性降低，考虑到人员流动性和业务快速迭代等因素，不推荐使用BEM命名规范
# USAGE
使用__连接Element，使用--连接Modifier
Block__Element--Modifier
# BEM简介
| Block | Element | Modifier |
|---|---|---|
具有独立意义的独立实体。Block可以嵌套并彼此交互，但从语义上讲，它们保持相等；没有优先级或层次结构。没有DOM表示的整体实体（例如控制器或模型）也可以是块。 | Block的一部分，没有独立的含义，并且在语义上与该Block相关。 | Block或Element上的标志。使用Modifier可以更改外观或行为。 |
| 命名 | ||
Block名称可包含:字母，数字和破折号组成 .Block | Element名称可包含：字母，数字，破折号和下划线 .Block__Element | Modifier名称可包含：字母，数字，破折号和下划线， 复杂的修饰符中的空格使用-代替 .Block__Element--Modifier .Block--Modifier |
| Examples | ||
| .block, .block-block-2 | .block__body, .block__body-element-1 | .block--mod, .block__elem--mod, .block--color-blackd |
| HTML | ||
| 如果任何DOM节点接受类名，则可以是一个块。 | 块中的任何DOM节点都可以是一个元素。 | 修饰符是一个额外的类名称，您可以将其添加到块/元素DOM节点中。仅将修饰符类添加到它们修改的块/元素中，并保留原始类。 |
| GOOD | ||
| <div class="block"> ... <span class="block__elem"></span> </div> | <div class="block block--mod">...</div> <div class="block block--size-big block--shadow-yes">...</div> | |
| BAD | ||
| <div class="block--mod">...</div> | ||
| CSS | ||
| Use class name selector only No tag name or ids No dependency on other blocks/elements on a page | Use class name selector only No tag name or ids No dependency on other blocks/elements on a page | Use modifier class name as selector To alter elements based on a block-level modifier Element modifier |
| GOOD | ||
| .block { } | .block__body { } | Use modifier class name as selector .block--mod .block__elem {} To alter elements based on a block-level modifier .block--hidden { } Element modifier .block__elem--mod { } |
| BAD | ||
| .block .block__elem { } , div.block__elem { } | ||
| Examples | ||
header, container, menu, checkbox, input | menu item, list item, checkbox caption, header title | disabled, highlighted, checked, fixed, size big, color yellow |
# 在scss中使用
配合scss的@mixin, @include, @extend, @at-root等简化css编写
@mixin flex-center-box {
display: flex;
align-items: center;
justify-content: center;
}
@mixin border-shadow-type($color, $alpha) {
border: 1px solid $color;
box-shadow: 0 0 5px rgba($color, $alpha);
}
.layout {
width: 100%;
overflow-x: hidden;
overflow-y: auto;
&__header {
width: 100%;
height: 50px;
}
&__body {
width: 100%;
&--warning {
@include border-shadow-type(#ff3333, .5);
}
&--center {
@include flex-center-box;
@at-root .layout--warning & {
background: rgba(#ff3333, .9);
}
}
}
&--center {
@include flex-center-box;
}
.layout--primary {
@include border-shadow-type(green, .5);
}
}
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
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
编译后
.layout{width:100%;overflow-x:hidden;overflow-y:auto}
.layout__header{width:100%;height:50px}
.layout__body{width:100%}
.layout__body--warning{border:1px solid #ff3333;box-shadow:0 0 5px rgba(255,51,51,0.5)}
.layout__body--center{display:flex;align-items:center;justify-content:center}
.layout--warning .layout__body--center{background:rgba(255,51,51,0.9)}
.layout--center{display:flex;align-items:center;justify-content:center}
.layout .layout--primary{border:1px solid green;box-shadow:0 0 5px rgba(0,128,0,0.5)}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# 文献参考
本文引用自
BEM官网
http://getbem.com/introduction/
http://getbem.com/naming/