BEM命名方法

发表于 | 分类于 |
字数统计: 324 字 | 阅读时长 ≈ 1 分钟

1.为什么选择这种方法命名呢？

以往命名的方法是

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
html结构
<div class="main">
    <div class="bigBox">
        <img src="" alt="">
        <div class="text">
            <span></span>
            <h></h>
        </div>
    </div>
</div>

stylus结构
.main
    .bigBox
        img
        .text
            span
            h

css结构
.main{}
.main .bigBox{}
.main .bigBox img{}
.main .bigBox .text{}
.main .bigBox .text span{}
.main .bigBox .text h{}

如果某一天，不需要.bigBox这个层，那么整个stylus css都要改，因为所有都有.bigBox这个类前提

为更有效率的打码，更有逻辑的打码，现在有一种命名方法，BEM，即block element modifier

2.BEM命名规则

block element modifier
块 元素 修饰符

块与元素用__连接，元素和修饰符用.连接

对一个组件（拿到设计稿，需要看清哪些可以做成一个个组件），可以这样命名

1
2
3
4
<div class="link-btn">
    <span class="link-btn__main-title red"></span>
    <span class="link-btn__sub-title"></span>
</div>

这样在stylus中就可以这样

1
2
3
4
.link-btn
  &__main-title
    &.red
    &__sub-title

编译出来的css就是

1
2
3
4
.link-btn{}
.link-btn__main-title{}
.link-btn__main-title red{}
.link-btn__sub-title