跳到主要内容

CSS BEM 方法论

BEM（Block Element Modifier）是一种流行的 CSS 命名方法论，旨在帮助开发者编写可维护、可扩展且结构清晰的 CSS 代码。BEM 的核心思想是将界面分解为独立的块（Block）、元素（Element）和修饰符（Modifier），并通过命名约定来明确它们之间的关系。

什么是 BEM？​

BEM 是一种命名约定，它通过以下三个部分来定义 CSS 类名：

  1. Block（块）：独立的、可复用的组件或模块。例如，一个导航栏（navbar）或按钮（button）。
  2. Element（元素）：块的组成部分，不能独立于块存在。例如，导航栏中的链接（navbar__link）。
  3. Modifier（修饰符）：用于改变块或元素的外观或行为。例如，一个禁用状态的按钮（button--disabled）。

BEM 的命名规则如下：

  • 块名：block
  • 元素名：block__element
  • 修饰符名：block--modifier 或 block__element--modifier

为什么使用 BEM？​

BEM 的主要优点包括：

  • 清晰的结构：通过命名约定，开发者可以快速理解 HTML 和 CSS 的结构。
  • 避免样式冲突：BEM 的命名方式减少了全局样式冲突的可能性。
  • 可维护性：模块化的设计使得代码更易于维护和扩展。
  • 团队协作：统一的命名规范有助于团队协作和代码审查。

BEM 的基本语法​

1. 块（Block）​

块是一个独立的组件，可以包含多个元素。块的类名通常是一个简单的单词。

html
<div class="card">
  <!-- 块内容 -->
</div>

2. 元素（Element）​

元素是块的组成部分，不能独立存在。元素的类名由块名和元素名组成，中间用双下划线（__）连接。

html
<div class="card">
  <div class="card__header">
    <!-- 元素内容 -->
  </div>
  <div class="card__body">
    <!-- 元素内容 -->
  </div>
</div>

3. 修饰符（Modifier）​

修饰符用于改变块或元素的外观或行为。修饰符的类名由块名或元素名和修饰符名组成，中间用双横线（--）连接。

html
<div class="card card--highlighted">
  <div class="card__header card__header--large">
    <!-- 修饰符内容 -->
  </div>
</div>

实际案例​

以下是一个使用 BEM 方法构建的按钮组件的示例：

html
<button class="button button--primary">
  Primary Button
</button>

<button class="button button--secondary">
  Secondary Button
</button>

对应的 CSS 代码如下：

css
.button {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  font-size: 16px;
}

.button--primary {
  background-color: blue;
  color: white;
}

.button--secondary {
  background-color: gray;
  color: black;
}

在这个例子中，button 是块，button--primary 和 button--secondary 是修饰符，用于改变按钮的外观。

BEM 的嵌套结构​

BEM 允许块嵌套块，元素嵌套元素，但需要注意保持命名的清晰性。例如：

html
<div class="card">
  <div class="card__header">
    <h2 class="card__title">Card Title</h2>
  </div>
  <div class="card__body">
    <p class="card__text">Card content goes here.</p>
  </div>
</div>

在这个例子中，card__title 和 card__text 是 card 块的元素。

总结​

BEM 是一种强大的 CSS 命名方法论，通过将界面分解为块、元素和修饰符，帮助开发者编写结构清晰、易于维护的代码。通过遵循 BEM 的命名规则，你可以减少样式冲突，提高代码的可读性和可维护性。

提示

在实际项目中，BEM 可以与其他 CSS 方法论（如 OOCSS 或 SMACSS）结合使用，以进一步优化代码结构。

附加资源​

练习​

  1. 使用 BEM 方法构建一个导航栏组件。
  2. 尝试为一个已有的项目重构 CSS，使用 BEM 命名规范。
  3. 创建一个带有多个修饰符的按钮组件，并为其编写样式。

通过实践，你将更好地掌握 BEM 方法论，并在实际项目中应用它。