css的BEM规范
wǎng luò shí huāng 2021-12-30
css
BEM
介绍css的BEM命名规范
# CSS — BEM 命名规范
例如BEM规范的LESS如下：
.article {
max-width: 1200px;
&__body {
padding: 20px;
}
&__button {
padding: 5px 8px;
&--primary {background: blue;}
&--success {background: green;}
}
}
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
编译之后得到如下CSS：
.article {
max-width: 1200px;
}
.article__body {
padding: 20px;
}
.article__button {
padding: 5px 8px;
}
.article__button--primary {
background: blue;
}
.article__button--success {
background: green;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
