BEM：构建清晰、可维护的 CSS 架构

前端

2023-09-03 18:27:22

CSS 架构的痛点

在早期，CSS 只有一个作用域，即为 HTML 元素应用样式。然而，随着网站变得越来越复杂，CSS 代码也变得难以维护和理解。一个小的改动可能导致整个网站出现意外行为，因为所有元素的样式都定义在同一个作用域中。

BEM 的解决方案

BEM（Block、Element、Modifier）是一种 CSS 架构，它通过将网站结构分解为三个主要部分来解决这些痛点：

Block： 代表网站中的一个独立实体，例如导航栏、页脚或表单。
Element： 代表 Block 中的一个组成部分，例如导航栏中的按钮或表单中的输入框。
Modifier： 用来修改 Block 或 Element 的外观或行为，例如导航栏的活动状态或表单输入的错误状态。

BEM 的好处

使用BEM架构设计CSS代码具有一系列优势：

可维护性： BEM将CSS样式组织成模块化的块，每个块都有明确的用途和作用域。这使得修改和维护CSS代码变得更加容易，即使对于不熟悉代码库的开发人员来说也是如此。
可读性： BEM采用命名约定，将块、元素和修饰符以一致的方式命名。这提高了代码的清晰度和可读性，使开发人员更容易理解代码的目的和结构。
可复用性： BEM鼓励将CSS代码分解成可重用的模块。这允许开发人员在网站的不同部分使用相同或相似的样式，从而减少代码冗余并提高开发效率。
可扩展性： BEM架构的模块化特性使其易于扩展和适应不断变化的网站需求。当需要添加新的功能或组件时，可以轻松创建新的块或修改器，而无需破坏现有的CSS代码。

BEM 实例

让我们考虑一个使用BEM架构编写的导航栏示例：

/* Block: Navigation Bar */
.block--navigation-bar {
  background-color: #333;
  padding: 10px;
}

/* Element: Navigation Bar Item */
.block--navigation-bar__item {
  display: inline-block;
  margin: 0 10px;
}

/* Modifier: Navigation Bar Item Active */
.block--navigation-bar__item--active {
  color: #fff;
}