首页 > 网页制作 >BEM命名规范下CSS类名逻辑结构详解

BEM命名规范下CSS类名逻辑结构详解

来源：互联网 2026-07-22 08:27:14

BEM是前端CSS命名方法论，Block为语义独立可复用组件，Element作为直接子部件禁止嵌套，Modifier表达可预测状态变体。类名需扁平化，避免多层嵌套与父级语义冗余，从而确保组件职责清晰、可维护性高。

BEM 规范的核心要求其实很明确：Block 必须是语义完整、可复用的独立组件（比如 .card），而不是视觉容器（比如 .section-2）；Element 只能作为 Block 的直接子部件（比如 .card__title），禁止嵌套；Modifier 表达可预测的状态（比如 .button--disabled），不绑定具体样式。听起来简单，但实际落地时，很多人会不知不觉跑偏，下面就来逐个拆解。

BEM命名规范下CSS类名逻辑结构详解

长期稳定更新的攒劲资源： >>>点此立即查看<<<

Block 是独立组件单元，不是视觉容器

BEM 规范中的 Block 必须具备可复用性、语义完整性和独立样式作用域。它不是“随便一个 div”，也不是“页面里第几个 section”。比如 .card 合法，因为它是可复用的卡片组件；而 .section-2 或 .wrapper 不合法——它们只描述位置或结构，没有业务语义。

常见错误现象：.header__na v 看似合理，但如果 na v 在侧边栏也复用，那它就该是独立 .na v Block，而不是 header 的子元素。

Block 名必须小写、连字符分隔（如 search-bar），避免驼峰或下划线
不能带父级语义： .card__card-title， .card__title
禁止仅靠 DOM 层级推导 Block：即使 HTML 里
，也不能直接写 .card .title —— 必须显式声明 .card__title

Element 是 Block 的直接子语义部件，不嵌套

BEM 命名规范中，Element 描述 Block 内部的组成部分，命名必须聚焦功能而非结构。它和 Block 之间只能有一层关系：Block → Element，不允许 Block → Element → SubElement。

常见错误现象：.card__content__title 或 .menu__item__link 这类三层命名，说明设计已超限——要么把 title 提升为独立 Block（如 .heading），要么重新审视是否真需要这么深的语义层级。

Element 名不带 Block 名前缀冗余： .card__card-header， .card__header
所有 Element 必须是 Block 的直接子节点（HTML 层面不强制，但语义上必须可视为平级）
如果某个“子元素”在多个 Block 中复用（如图标、徽标），它就应该是一个独立 Block：.icon，而非 .button__icon 或 .card__icon

Modifier 表达状态或变体，不绑定视觉快照

BEM 的 Modifier 是 Block 或 Element 的修饰，用于表达可预测的状态变化（如 is-loading）、尺寸变体（--large）或主题变体（--dark）。它不是 CSS 属性的直译，而是业务意图的映射。

常见错误现象：.button--red 或 .card--big 看似直观，但换品牌色就得全局搜索替换；.button--primary--disabled 这种链式写法会破坏组合自由度。

Modifier 必须依附于 Block 或 Element 存在： .button--disabled、 .button__text--small，单独使用 .--disabled
多个 Modifier 并列使用，不嵌套： .button--primary.button--disabled， .button--primary--disabled
值必须可维护： --loading、 --featured， --v2、 --new