根本原因是SCSS嵌套未切断原子类与上下文的绑定，导致编译后选择器权重意外升高（如0,2,0或更高），而非原子类本身权重低；BEM混用嵌套更放大此陷阱。
原子类（如 .btn、.text-center）本身权重低（0,1,0），按理说更容易被覆盖，但实际在 SCSS 项目中反而更难控制优先级——根本原因不是类名“原子”，而是你**没切断它和嵌套上下文的绑定关系**。
SCSS 嵌套让原子类悄悄变重
你以为写的是原子类，编译后却成了高权重选择器。关键在 & 和空格的组合：
-
.card { &__title { color: red; } }→ 编译为.card__title（权重 0,1,0），安全 -
.card { .title { color: red; } }→ 编译为.card .title（权重 0,2,0），已翻倍 -
.modal .content { &__header { } }→ 编译为.modal .content__header（权重 0,2,0），父级路径被带进来了
一旦嵌套层级超过两层，哪怕只用一个 &，也极可能产出 0,2,0 或更高的选择器。DevTools 里看 Specificity 值会突然跳到 20，而你根本没手动加 ID 或重复类名。
@extend 不是“复用”，是“合并选择器”
@extend 看似轻量，实则把源选择器原样塞进目标选择器列表，不改权重，只增长度：
立即学习“前端免费学习笔记（深入）”；
%text-center { text-align: center; }-
.btn { @extend %text-center; }→.btn { text-align: center; }（OK） -
.form .field { @extend %text-center; }→.form .field { text-align: center; }（权重 0,2,0，且强依赖 DOM 结构）
问题在于：你本想复用工具逻辑，结果生成了一个必须出现在 .form 内部才生效的选择器。HTML 里只要 .field 没包在 .form 下，样式就彻底丢失——这不是优先级低，是压根没匹配上。
BEM 原子类 + 嵌套 = 隐形权重陷阱
BEM 本意是切断匹配路径，但 SCSS 里混用 BEM 和嵌套，反而制造更隐蔽的冲突：
- 你写了
.card { &__body { @media (min-width: 768px) { padding: 2rem; } } } - 如果外层还有
.dashboard .layout嵌套，最终 CSS 可能是：.dashboard .layout .card__body（权重 0,3,0） - 此时
.card__body单独加个.card__body--dense（0,1,0）根本压不住它
真正可控的做法是：BEM 类名必须独立存在、独立使用；所有嵌套结构只用于组织语义，不用于生成选择器。用 @at-root 把工具类提级，而不是靠嵌套“确保生效”。
为什么开发者总在 DevTools 里找不到问题根源？
因为浏览器只告诉你「这个属性被覆盖了」，但不会告诉你「这个选择器是 SCSS 嵌套自动生成的」。常见盲区：
- 在 Computed 面板看到
.header__title被灰色删除线划掉，点开来源发现是.page .section .content .header__title—— 这个长选择器你代码里根本没写，是嵌套漏出来的 - 检查
Specificity值为 30，但以为是自己写了三个类，其实是嵌套加了两个后代关系 - 用
!important临时修复，结果下个组件用同样方式覆盖时，又得叠一层!important，权重恶性循环从这里开始
最麻烦的不是报错，是编译无误、CSS 合法、页面看起来正常——直到某次 DOM 结构微调或加载顺序变化，某个原子类突然失效，而你查遍 HTML 和 SCSS 都看不出哪行代码动了它。
