为什么CSS中不推荐使用超过两层的BEM元素嵌套？-css教程-PHP中文网

三层类名如.card__header__title是非法幽灵类名，浏览器无法匹配且引发回溯性能问题；应提级为独立Block并用Modifier扩展，SCSS中&__嵌套必须避免生成后代选择器。

为什么css中不推荐使用超过两层的bem元素嵌套？

浏览器匹配选择器时会因三层类名触发回溯失效

写 .card__header__title 这类三段式类名，CSS 本身不会报错，但浏览器根本不会按你设想的方式匹配它——因为这个类名根本没在 HTML 中真实存在。你真正写的可能是


，而 .card__header__title 是个“幽灵类名”，既没绑定 DOM，也没对应任何样式规则。
更危险的是，有人误以为写了这个类名，就该在 CSS 里写 .card__header .card__title，结果生成后代选择器：匹配时先找所有 .card__title，再逐个往上确认父级是不是 .card__header，再确认 .card__header 是否在 .card 内。DOM 节点越多，这个回溯链越长，移动端性能可能直接掉 4 倍。
三层下划线暴露组件职责划分错误
.card__body__list__item 看似只是“多写了两个下划线”，实际说明你把本该独立复用的 list 强行塞进了 card__body 的私有域里。只要 list 在侧边栏、弹窗、表单里也出现过，它就不是元素，而是 Block。

正确做法是提级为独立 list Block，HTML 中写 

若需卡片内特殊样式，加 Modifier：list--in-card，而不是靠父级类名推导
绝对不要写 .card__body .list 这种后代选择器——它让 list 失去脱离上下文复用的能力

SCSS 里写 &__header &__title 会编译出非法选择器
SCSS 的 & 是父选择器完整副本，不是缩进作用域。写成：
.card {
  &__header {
    &__title { color: red; }
  }
}
编译结果是 .card__header .card__header__title，不仅类名非法（BEM 明确禁止三层），还生成了带空格的后代选择器，权重翻倍、匹配变慢、JS 动态加类极易被覆盖。
合法写法只有一种：

											
												
												
													CSS工具箱(专业版)
													全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。
												
												下载
												
											
										
.card {
  &__header { }
  &__title { }
  &--compact { }
}
所有规则都输出单类名，无空格，无回溯，无耦合。
真正容易被忽略的不是“能不能写”，而是“要不要留接口”
每次你犹豫要不要写 block__element__subelement，其实是在回答一个问题：这个 UI 片段，下次出现在另一个页面时，我愿不愿意直接复制粘贴这段 HTML 和 class？
如果答案是否定的，说明它已经具备独立生命周期——该抽成 Block，而不是用嵌套藏起来。BEM 不是命名规范，是组件边界的硬约束；类名长度只是表象，职责模糊才是根因。