无序之中的秩序：BEM 命名约定解析及应用技巧

BEM 的哲学：无序中的秩序

BEM 是一个 CSS 类样式的命名约定，它旨在让 CSS 类样式更加清晰、可维护、可重用，而其核心理念是将复杂的问题简单化。它所主张的无序中的秩序，即是通过一种简单的命名约定，让看似杂乱的 CSS 代码变得井然有序。

BEM 的结构：Block, Element, Modifier

BEM 将 CSS 类样式划分为三个组成部分：Block（块）、Element（元素）和 Modifier（修饰符）。

• Block： Block 是独立存在的，具有特定功能和含义的代码块，通常对应着一个页面或组件。
• Element： Element 是属于某个 Block 的组成部分，通常对应着 Block 中的一个子元素。
• Modifier： Modifier 是对 Block 或 Element 进行修饰或改变其外观、行为的代码块，通常用于实现不同的状态或样式。

BEM 的命名规则：

BEM 的命名规则非常简单，就是用下划线将 Block、Element 和 Modifier 连接起来，形成一个完整的 BEM 类名。

• Block 的命名规则： Block 的名称通常由字母开头，然后是连字符和 Block 的具体名称，例如：block-name。
• Element 的命名规则： Element 的名称通常由两个下划线开头，然后是 Element 的具体名称，例如：__element-name。
• Modifier 的命名规则： Modifier 的名称通常由两个连字符开头，然后是 Modifier 的具体名称，例如：--modifier-name。

BEM 的应用技巧：

在实际开发中，我们可以通过以下技巧来有效运用 BEM：

• 使用 BEM 专用工具： 目前有很多专用于 BEM 的工具，这些工具可以帮助我们自动生成 BEM 类名，从而简化 CSS 开发的过程。
• 遵循 BEM 的命名规则： 在使用 BEM 时，要严格遵循 BEM 的命名规则，这样才能确保 CSS 代码的清晰、可维护、可重用。
• 合理组织 BEM 类名： 在组织 BEM 类名时，可以按照 Block、Element 和 Modifier 的顺序排列，这样可以使代码更加清晰易读。

BEM 的优势：

使用 BEM 有以下优势：

• 清晰易读： BEM 使 CSS 代码更加清晰易读，因为每个 BEM 类名都对应着特定的 Block、Element 和 Modifier。
• 可维护性强： BEM 使 CSS 代码更易于维护，因为我们可以通过修改特定的 BEM 类名来实现样式的修改。
• 可重用性强： BEM 使 CSS 代码更具可重用性，因为我们可以将相同的 BEM 类名用于不同的项目或组件。

BEM 的总结

BEM 是一种非常有效的 CSS 类样式命名约定，它可以使 CSS 代码更加清晰、可维护、可重用。在实际开发中，我们可以通过使用 BEM 专用工具、遵循 BEM 的命名规则和合理组织 BEM 类名来有效运用 BEM。