块
==特征==
The block name describes its purpose ("What is it?" — menu or button), not its state ("What does it look like?" — red or big)
块名称描述了它的用途(“它是什么?”-菜单或按钮),而不是它的状态(“它看起来像什么?”-红色或大的)。
<!--正确示例-->
<div class="error"></div>
<!--错误示例-->
<div class="red-text"></div>
使用规则
-
块可以嵌套块
-
可以嵌套任意的块
<header class="header">
<div class="logo"></div>
<form class="search-form"></form>
</header>
元素
属于块的一部分,不能单独使用
==特征==
元素名称描述了它的用途(“它是什么?”-菜单或按钮),而不是它的状态(“它看起来像什么?”-红色或大的)。
命名规范block-name__element-name
<!-- `search-form` 块 -->
<form class="search-form">
<!-- 这是`search-form` 块的元素`input` -->
<input class="search-form__input">
<!-- 这是`search-form` 块的元素`button` -->
<button class="search-form__button">Search</button>
</form>