BEM 命名规范

来源：ChatGPT, prompt "什么是 BEM 命名规范？", September 30, 2023, OpenAI, https://chat.openai.com.

BEM（Block Element Modifier）是一种命名规范和方法，用于编写可维护且可重用的前端代码，特别是用于编写 CSS 和 HTML。BEM 的核心思想是将界面分解为可重用的组件，以及定义这些组件之间的关系，从而帮助开发人员更好地组织和管理代码。

BEM 规范包括以下几个关键概念：

1. Block（块）：块是页面上的一个独立、可重用的组件或模块，具有高度的内聚性。块的命名应该是独特的，并用短划线（-）分隔单词，例如 header、button、menu 等。

2. Element（元素）：元素是块的一部分，通常没有独立的含义。元素的命名应该以块的名字开头，后面跟两个下划线（__）和元素的名字，例如 menu__item、button__text。

3. Modifier（修饰符）：修饰符用于表示块或元素的不同状态或变体。修饰符的命名应该以块或元素的名字开头，后面跟两个短划线（--）和修饰符的名字，例如 button--primary、menu__item--active。

下面是一个示例，演示了如何使用 BEM 命名规范创建一个按钮组件：

<!-- 块：button -->
<button class="button">
  <!-- 元素：button__text -->
  <span class="button__text">Click me</span>
</button>

<!-- 使用修饰符来表示不同状态 -->
<button class="button button--primary">
  <span class="button__text">Primary Button</span>
</button>

在上面的示例中，button 是块，button__text 是块的元素，button--primary 是块的修饰符。这种命名方式有助于清晰地定义组件的结构和样式，使其易于维护和扩展。

使用 BEM 命名规范的好处包括：

• 可读性：BEM 规范的命名方式使代码易于理解和维护，因为它反映了组件的结构和关系。

• 可维护性：BEM 代码更容易维护，因为每个块或元素都有自己的命名空间，不容易与其他部分发生冲突。

• 可重用性：BEM 有助于创建可重用的组件，这些组件可以在项目的不同部分或不同项目中重复使用。

• 可扩展性：通过添加新的块、元素或修饰符，可以轻松扩展和定制现有组件。