首页 > 网页制作 >BEM双下划线误用解析：纠正CSS元素层级认知

BEM双下划线误用解析：纠正CSS元素层级认知

来源：互联网 2026-05-27 19:23:07

在CSS开发中，命名约定是保障团队协作与项目长期维护的关键。BEM（块、元素、修饰符）方法论以其清晰的语义和扁平化的结构，成为众多大型项目的首选。然而，其标志性的双下划线“__”和双横杠“--”符号，却常常成为开发新手乃至有一定经验者的常见误区。这些错误不仅违背了BEM的语义核心，更会为后续的样式覆

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

误区一：将双下划线误解为DOM层级分隔符

当看到类似

的代码时，很容易产生一种直觉：双下划线应像文件路径一样，反映HTML的嵌套深度。这正是最常见的第一大误解。

BEM中的 __ 并非“嵌套标记”，其核心作用是声明“直属归属关系”。它仅表明：“这个元素直接属于某个块”，至于该元素在HTML结构中的嵌套层数，BEM并不关心。

错误命名的代价：像 card__header__title 这样的类名，虽然浏览器不会报错，但其语义已经断裂。这个 title 究竟直接属于 card 块，还是属于 header 元素？这种模糊性会导致自动化工具（如CSS模块处理器）解析困难，团队成员在阅读代码时也难以快速判断样式的作用范围。
正确的做法：应回归到块的上下文。无论标题在DOM中被包裹多少层，只要它在概念上属于 card 块，就应命名为 card__title。
关于组件复用：如果一个像 title 这样的组件需要在多个不同的块（如 card 和 user-profile）中使用，那么它本身就应该被设计成一个独立的块，命名为 title，而不是作为其他块的附属元素。

误区二：混淆双下划线与双横杠，导致修饰符作用域错乱

另一个典型错误是写成 card__header--expanded。这看似合理：“让卡片的头部处于展开状态”，但却暴露了对修饰符作用域的误解。

修饰符描述的是“这个UI单元（块或元素）当前处于何种状态或变体”，而不是去修饰某个具体的视觉表现。将状态逻辑从块层下沉到元素层，会给后续维护带来意想不到的麻烦。

状态应由谁驱动：card--expanded 表示整个卡片组件处于展开状态。这个状态应驱动卡片内部所有相关子元素的样式变化（例如内容区域显示、图标旋转等）。
语义矛盾：card__header--expanded 则暗示“卡片的头部可以独立于卡片本身被展开”。这在大多数设计系统中并无对应的业务逻辑，容易造成理解偏差。
更危险的混用：试想 card--expanded card__header--collapsed 同时存在的场景。CSS选择器之间可能没有冲突，但业务逻辑已自相矛盾：“卡片是展开的，但卡片的头部是收起的”。这类代码将变得难以调试和维护。

误区三：使用非标准符号，破坏工具链与协作基础

部分开发者觉得双下划线输入麻烦，或为了“美观”，改用单下划线 _ 或中划线 - 来连接块和元素，例如 card_header 或 card-header。这是一个代价高昂的决定。

整个前端工具生态对BEM的支持，都建立在 __ 和 -- 这两个明确的“结构锚点”之上。

解析失败：card_header 会被工具误判：块名是 card，元素是 header。但如果块名本身是复合词，如 user-card，那么 user-card_header 将完全无法被正确拆解。
工具静默失效：像 PostCSS 的 @bem 这类插件，遇到非标准命名时会直接静默跳过，不报错也不修复。问题会被隐藏，直到运行时样式异常才暴露。
认知偏差传染：当新成员看到代码库中混杂着 form_input--disabled 这样的类名时，会自然地认为 input 是元素，却意识不到正确写法应是 form__input--disabled。这种错误认知一旦形成，极易在整个团队中扩散。

误区四：将双下划线与CSS选择器路径混为一谈，加剧耦合

为了追求“精准”选择，有些开发者会写出 .card__content p 或 .card__header h2 这样的选择器。他们认为这样能更精确地命中目标元素。

然而，这完全违背了BEM的初衷。BEM的目标之一，就是让样式定义脱离对特定HTML标签和深层嵌套结构的依赖，从而实现样式的独立性和可移植性。上述写法恰恰又把样式牢牢绑定在了特定的标签和DOM层级上。

脆弱的依赖：一旦出于语义或结构考虑，将
修改为
，前面那条依赖 h2 标签的选择器就会立刻失效。
BEM的正确写法：对于BEM命名，正确的CSS选择器应只针对类本身：.card__title { }。不添加空格，不指定标签，也不依赖父级选择器。
如何区分标题级别：如果确实需要区分不同层级的标题样式，应通过定义不同的元素名来实现，例如 card__heading-1、card__heading-2，而不是依赖 h1、h2 这些HTML标签。

归根结底，掌握BEM的难点不在于记住“双下划线连接元素，双横杠连接修饰符”这条规则。真正的挑战在于，每次敲下 __ 之前，都需要停下来思考：这个类名是否清晰地表达了“它属于哪个块”以及“它是什么”，而不是去描述“它在HTML结构里位于第几层”。只有想清楚这一点，写出的BEM代码才能真正发挥其价值，成为项目长期健康的保障。

侠游戏发布此文仅为了传递信息，不代表侠游戏网站认同其观点或证实其描述