cssbem规范

规范

BEW指 块（block），元素（element），修饰符（modifier）。

__用来连接B和E 。

_用来连接B和M，E和M，如 search__btn_active。

-用来连接含多个单词的B或E或M。

示例

块：例如搜索框块，log的块，菜单块

search块，用search和元素(ipt、btn)连接

<ul class="search">
	<input class="search__ipt" />
	<button class="search__btn">
	</button >
</ul>

item、container、box也化到元素E里

<!-- 某个块 -->
<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>

/* 在SASS文件中，也需要注意嵌套层次的意义，尽量按照 BEM三层来 */
.search-form {
    &__button {
        &_hover {}
    }
     
    &_button-set {
        &_hover {}
    }
}
 

摘抄：https://www.w3cplus.com/css/bem-definitions.html