BEM命名规范

1. 什么是BEM命名规范

BEM是一种流行的CSS类名命名约定。  

• B(block): 组件最外层被定义为块的父元素。  
• E(element): 组件内部的一个或多个子组件。  
• M(Modifier): block 或 element 在不同状态下的变体。

2. BEM命名规则

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

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

3. BEM命名的好处

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

4. 示例

<figure class="hero">
    <img class="hero__img" src="https://t7.baidu.com/it/u=1819248061,230866778&fm=193&f=GIF">
    <figcaption class="hero__caption hero__caption--big">渐变风格插画</figcaption>
</figure>

.hero {
    display: flex;
    justify-content: center;
    position: relative;
    height: 400px;
    width: 800px;
    padding: 20px;
    background-color: bisque;
}
.hero__img {
    overflow: hidden;
}
.hero__caption {
    position: absolute;
    bottom: 40px;
    font-family: "微软雅黑";
    font-weight: bold;
    font-size: 20px;
}
.hero__caption--small {
    font-size: 16px;
}
.hero__caption--big {
    font-size: 24px;
}