结论不是降低优先级，而是停止生成高权重选择器；bem通过单类名（如.card__title）将权重恒定为(0,0,1,0)，避免多层后代选择器（如.card .header .title）导致的权重叠加与覆盖困境。
直接说结论：不是“降低优先级”，而是停止生成高权重选择器——多层嵌套本身不危险，危险的是你没意识到它正在把 .card .header .title 这种 0-3-0 权重的选择器塞进 CSS 文件里。
为什么嵌套会让样式越来越难覆盖
嵌套不是语法糖，是选择器拼接器。每多一层空格（后代关系），就多一个 d 或 c 计数，权重直接叠加。比如：
-
.modal .content .text p span em→ 权重 (0,0,0,6)，比.highlight（0,0,1,0）还低？错，d=6 vs c=1，高位为 0，但 d 位数值大不代表赢，真正比的是 (a,b,c,d) 元组顺序：先比 a，再 b，再 c，最后 d。所以 (0,0,0,6) 仍输给 (0,0,1,0)，因为 c 位 1 > 0 - 但
#form .field .input::placeholder是 (0,1,1,2)，而.input::placeholder是 (0,0,1,2)，b 位 1 > 0，后者永远失效 - DevTools 的 “Computed” 面板里看到被划掉的样式，右侧 specificity 值（如 0,1,1,2）就是真实判决依据，不是“谁写在后面”
用 & 拼类名，别拼后代链
& 不是“当前作用域”，是父选择器完整字符串。错用等于主动加权。
- 错：
.btn { & .icon { display: none; } }→ 编译为.btn .icon，多一层无意义后代，权重+1 - 错：
.list { & li { margin: 4px; } }→ 实际仍是.list li，&没起作用 - 对：
.btn { &__icon { display: inline-block; } }→.btn__icon，新类名，权重恒为 (0,0,1,0) - 对：
a { &:hover { color: blue; } }→a:hover，伪类不增加层级计数，权重 (0,0,1,1)
@at-root 是唯一能物理脱钩的语法
嵌套上下文里想写平级规则？@at-root 不是“跳出逻辑”，是“控制输出位置”。它让规则脱离父选择器前缀，避免冗余拼接。
- 要定义同级修饰符：
.card { @at-root .card--compact { padding: 4px; } }→ 输出.card--compact，不是.card .card--compact - 响应式规则必须抽离：
.btn { @at-root @media (min-width: 768px) { &--large { font-size: 18px; } } }→ 输出@media (min-width: 768px) { .btn--large { ... } } - 避免
@at-root套@at-root：意图模糊，调试时难定位来源，VS Code 里 Ctrl+Click 跳转到编译后 CSS 才是最准的验证方式
BEM 不是命名习惯，是权重锚点
BEM 把 DOM 层级“翻译”成类名语义，而不是靠缩进模拟父子关系。它让权重从不可控的结构依赖，变成可预测的类名计数。
-
.nav__item--active权重永远是 (0,0,2,0)，不管它在 HTML 里是<li class="nav__item--active">还是<div class="nav__item--active"> <li>禁止在 BEM 类名内部再写嵌套：<code>.nav__item { span { color: red; } }→ 编译出.nav__item span，权重 (0,0,1,2)，破坏 BEM 原则，也埋下覆盖隐患 - Modifier 只用于状态：
.button--disabled合理，.button--margin-top-8就是滥用，该用工具类或布局系统解决
真正麻烦的从来不是怎么写高权重选择器，而是当别人用 .modal.is-open .overlay（0-3-0）覆盖了你的 .overlay（0,0,1,0）时，你得去翻三层嵌套的 Less 文件才能定位源头——而 BEM + @at-root + 单层语义嵌套，能让这个问题从“排查噩梦”变成“一眼看穿”。
