面试题：CSS 中 BEM 命名规范的基本组成部分是什么

Question

请阐述 CSS BEM 命名规范里块（Block）、元素（Element）、修饰符（Modifier）各自的含义，并举例说明如何在 HTML 和 CSS 中使用这种规范进行命名。

Answer 1

块（Block）

• 含义：块是一个独立的实体，在页面上有明确的意义和功能，通常是一个较大的组件或模块，它可以独立存在，并且在不同的上下文中保持一致的外观和行为。
• 示例：例如一个导航栏组件，可以将其视为一个块，命名为 nav。在 HTML 中：

<nav class="nav">
  <!-- 导航栏内容 -->
</nav>

在 CSS 中：

.nav {
  background-color: #333;
  color: white;
}

元素（Element）

• 含义：元素是块的组成部分，不能脱离块单独存在，它们是块内实现特定功能或展示特定内容的子部分。
• 示例：在 nav 块中的导航项，就是元素。可以命名为 nav__item。在 HTML 中：

<nav class="nav">
  <a href="#" class="nav__item">首页</a>
  <a href="#" class="nav__item">关于我们</a>
</nav>

在 CSS 中：

.nav__item {
  display: inline-block;
  padding: 10px;
}

修饰符（Modifier）

• 含义：修饰符用于改变块或元素的外观、行为或状态。它描述块或元素的特定条件、变化或不同版本。
• 示例：例如，导航项被选中时的状态，可以通过修饰符来表示。命名为 nav__item--active。在 HTML 中：

<nav class="nav">
  <a href="#" class="nav__item nav__item--active">首页</a>
  <a href="#" class="nav__item">关于我们</a>
</nav>

在 CSS 中：

.nav__item--active {
  background-color: #007bff;
  color: white;
}