BEM类名本身不解决权重问题，但嵌套会毁掉它：SCSS中错误嵌套（如.card { .card__title {} }）使选择器权重从0-1-0升至0-2-0，导致匹配失效、复用困难、性能下降；正确做法是用&__title、@at-root提级、避免深层嵌套及状态套娃。
为什么BEM类名本身不解决权重问题，但嵌套会毁掉它
BEM类名（如 .card__title）本意是单类名、零权重膨胀，可一旦你在SCSS里写成 .card { .card__title { ... } }，编译结果就变成 .card .card__title——两个类名叠加，权重从 0-1-0 暴涨到 0-2-0。这不是BEM失效，是你亲手给它套了枷锁。
- DevTools里“Computed”面板看到的生效样式，常被压在一堆灰色规则下，根源就是这个冗余父选择器
- 组件挪到新容器（比如从
.dashboard移到.modal）后，.card .card__title立刻不匹配，但.card__title本该稳稳生效 -
&__title必须紧贴块名定义：写成.card { &__title { ... } }才输出.card__title；中间加空格或换行，& 就断掉
用 @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块内禁用&嵌套。例如@media (min-width: 768px) { .card { &__body { } } }，若外层还有.layout .dashboard，&会展开全部路径，生成 6 层起步的选择器
嵌套超过3层时，删掉最内层比补 & 更有效
SCSS允许无限嵌套，但浏览器匹配选择器是从右往左查候选元素再逐级回溯父级。.a .b .c .d .e 的过程是：先找所有 .e 元素，再对每个 .e 验证其父是否为 .d，再验证 .d 的父是否为 .c……每多一层，CPU 就多一次遍历。4层已是性能拐点，5层以上滚动卡顿明显。
- 常见错误现象：
element.classList.add("is-active")失效、DevTools里生效样式被压在几十条灰色规则下、改一个 class 要同步调三处 CSS - 不是覆盖逻辑错了，是选择器太长、权重太高、根本没被正确匹配上
- 真实重构动作：遇到
.card { .header { .title { ... } } }，直接删掉.title这层嵌套，改用.card__title单类名 +@at-root提级 - 检查编译后 CSS：如果出现超过 4 个 class 连续空格拼接（如
.page .section .content .item .title），说明嵌套已失控
用 @mixin 替代深层状态嵌套，而不是靠 &:hover 套娃
写 .btn { &:hover { &:active { ... } } } 表面省事，实则生成 .btn:hover:active 这种高权重、难调试、无法被 PurgeCSS 安全识别的选择器。BEM 的类名已足够表达状态，嵌套只会模糊边界。
立即学习“前端免费学习笔记（深入）”；
- 禁止：
.search-form { &__input { &:hover { ... } } }→ 权重升到0-2-1，且无法复用 - 推荐：
.search-form__input:hover { ... }或封装为@mixin input-hover { &:hover { ... } }，然后.search-form__input { @include input-hover; } -
@mixin可加参数支持条件化输出，比如@mixin responsive-padding($breakpoint: md)，比嵌套更透明、更可预测 - 真正要复用的是视觉逻辑，不是选择器拼接；权重失控的根因，往往是你本该拆成两个独立 class 的逻辑，硬靠嵌套捆绑在一起了
.card__title 却在模板里只写 class="title"，再规范的SCSS也救不了。 
