CSS 之 BEM 命名规范

发表于 分类于 阅读次数： 本文字数： 498 阅读时长 ≈ 2 分钟

CSS BEM（块元素修饰符）是一种命名约定和方法论，用于在编写可维护和可扩展的 CSS 代码时提供结构和规范。它的目标是解决样式表的命名冲突问题，并提供一种一致性和可重用性的编码方式。

BEM 的命名约定由以下三个部分组成：

块（Block）：代表一个独立的、可重复使用的组件或模块，它是页面上的一个独立单元。块的命名应该简洁、清晰，并用一个单词或短语表示，使用连字符分隔单词（例如：button、header）。

元素（Element）：代表块的内部元素，它们不能独立存在，必须作为块的一部分存在。元素的命名应该以块的名称为前缀，用两个连下划线 ** 进行分隔（例如：button**text、header__logo）。

修饰符（Modifier）：代表块或元素的不同状态或变体。修饰符是可选的，可以通过改变外观、行为或状态来扩展块或元素。修饰符的命名应该以块或元素的名称为前缀，用两个连短划线 – 进行分隔（例如：button–primary、header–fixed）。

使用 CSS BEM 的主要优点包括：

可读性：BEM 提供了一种一致的命名约定，使代码易于理解和阅读，减少团队成员之间的沟通成本。

可重用性：BEM 鼓励模块化和组件化的设计思维，使得样式代码更容易重用于不同的场景。

可维护性：由于命名规范和模块化的结构，BEM 使得样式表的维护更加简单和可靠。

总之，CSS BEM 是一种帮助开发人员编写可维护、可扩展和易于理解的 CSS 代码的方法论。它提供了一种命名约定，通过明确的命名规则和结构化的代码组织，促进团队协作和代码质量的提升。