BEM CSS命名法

BEM是Block（块） Element（元素） Modifier（修饰器）的简称。

1. 一个独立的（语义上或视觉上），可以复用而不依赖其它组件的部分，可作为一个块（Block）
2. 属于块的某部分，可作为一个元素（Element）
3. 用于修饰块或元素，体现出外形行为状态等特征的，可作为一个修饰器（Modifier）

<!-- 某个块 -->
<form class="search-form">
    <!-- 某个元素 -->
    <div class="search-form__content-left">
        <!-- 错误：不能出现多个元素 -->
        <h2 class="search-form__content-left__h2">标题</h2>
        <!-- 某个元素，虽然是子集，保证了只有一级元素 -->
        <input class="search-form__input">
        <!-- 某个元素，加上了hover修饰器 -->
        <button class="search-form__button search-form__button_hover">搜索</button>
        <button class="search-form__button-set search-form__button-set_hover">搜索1</button>
        <!-- 错误：不能单独使用lg修饰器 -->
        <button class="search-form__button_lg">搜索</button>
         
        <!-- 块中可嵌套着另一个块 -->
        <p class="my-img">
            <img class="my-img__logo" src="abc.png" alt="image" title="image">
        </p>
         
    </div>
</form>
 
<div class="search-result"></div>

BEM 规范虽然结构比较清晰，但有时候会产生代码冗余，一些时候不必严格按照BEM来命名。