BEM 架构

BEM 是一种前端开发中常用的命名规范，用于帮助开发者规范化命名并组织 CSS 和 HTML 结构，以便更好地管理和维护前端代码。

BEM 代表的含义是块（Block）、元素（Element）、修饰符（Modifier）：

块（Block）：块是一个独立的实体，它在页面中有自己的意义并且可以独立存在。比如，header、menu、checkbox 等都可以称为块。
元素（Element）：元素是块的一部分，没有独立的意义。元素应该在块的上下文中被重复使用。例如，在一个块中，可能包含着按钮、输入框等元素。
修饰符（Modifier）：修饰符是块或元素的状态或特性的变体。它用于修改外观、行为或状态。例如，可以通过添加修饰符来改变块或元素的颜色、大小、状态等。

BEM 的命名约定通常是通过块__元素--修饰符（如 block__element--modifier）来命名 CSS 类，以清晰地表达一个元素的层级结构和状态。

例如，在 HTML 结构中：

<div class="block">
  <div class="block__element"></div>
  <div class="block__element block__element--modifier"></div>
</div>

对应的 CSS 命名如下：

.block { /* 块的样式 */ }
.block__element { /* 元素的样式 */ }
.block__element--modifier { /* 修饰符的样式 */ }

BEM 架构有助于提高前端代码的可维护性和可重用性，减少选择器的嵌套，避免选择器的冲突，并提供更清晰的命名结构，使得代码更易于阅读和理解。

做BEM规范的一个好处就是在维护或者debug的时候，开发者可以根据这种规范化的命名快速找到对应的css代码。不管在大型项目还是在小项目中，按规范定义类名是非常值得推荐的。

可能有的朋友会问这个的应用场景。接下来我们可以看下elementUI等组件库的类名。

需要注意的是，BEM架构可以由使用者自行定义规范，并不一定要完全按先下划线然后中划线的形式。

CSS - BEM架构（规范）