结论不是BEM有问题，而是误用&导致后代选择器冗余、嵌套超3层或混淆DOM层级与组件结构；应检查&前空格、删内层嵌套、用@at-root提级并确保类名带块前缀。
直接说结论：BEM嵌套生成冗长选择器，90%是因为 & 前多了一个空格、嵌套超过3层、或误把 DOM 层级当组件结构来写——不是 BEM 有问题，是你没看清它编译出了什么 CSS。
检查 & 前有没有空格：有空格就变后代，没空格才拼接
这是最隐蔽也最常踩的坑。& 永远只代表**紧邻上一层的选择器字符串**，不看缩进，也不“回溯”。空格决定它是拼接还是嵌套：
-
.card { &__header { } }→ 编译为.card__header（正确） -
.card { .header { &__title { } } }→ 编译为.header__title（&指向.header，不是.card） -
.card { .header { & __title { } } }（注意中间空格）→ 编译为.header .card__title（完全错乱，权重翻倍）
按住 Ctrl 点击编译后的 CSS 文件，直接看生成结果，比靠缩进猜可靠十倍。
嵌套超3层时，删掉最内层比补 & 更有效
浏览器匹配选择器是从右往左的。.layout .sidebar .nav .item .link 这种5层后代选择器，会让引擎对每个 .link 都逐层向上验证父级是否存在——DOM 越深、更新越频繁，卡顿越明显。Lighthouse 报 “Avoid overly specific selectors” 就源于此。
立即学习“前端免费学习笔记（深入）”；
- Sass 官方推荐嵌套上限是 3 层：容器 → 元素 → 伪类/修饰符（如
&:hover、&--active） -
.card { .header { .title { } } }应该直接删掉.title这层，改用.card__title+@at-root提级输出 - 如果删了之后 HTML 无法准确匹配，说明问题不在 Sass，而在组件结构本身是否合理
用 @at-root 主动提级，而不是靠缩进“假装有上下文”
@at-root 不是逃逸键，是语义提级开关。当你写的样式逻辑上属于当前组件、但不该继承嵌套路径时，必须显式提级，否则产出的就是带毒冗余选择器：
- 错误：
.modal { .header { @extend %text-center; } }→ 输出.modal .header .u-text-center - 正确：
.modal { @at-root .u-text-center { text-align: center; } }→ 输出.u-text-center - 可控提级：
@at-root (with: .theme-dark) { .button { color: white; } }→ 输出.theme-dark .button - 特别注意：
@media块内禁用&嵌套；要用@at-root (with: media)才能保证媒体查询规则平级输出
命名即作用域：BEM 类名必须带块前缀，不能靠嵌套“省略”
嵌套本身不解决命名冲突。.card { .title { } } 编译后是 .card .title，仍可能和全局 .title 打架。真正起作用的是显式绑定父级的 &__title 写法：
-
.card { &__header { } &__body { } }→ 生成.card__header和.card__body，自带组件域标识 - 避免用标签名嵌套：
ul li a一旦 HTML 换成nav就全失效 - 伪类统一用
&:hover、&:focus，不要写成li:hover a
真正难的不是让 & 多嵌两层，而是删掉那一层后，HTML 是否仍能准确匹配——如果删了就断，那得先理清组件边界，而不是在 Sass 里打补丁。
