sass嵌套本身不提升优先级，但超3层易生成高权重冗余选择器（如.page .section .content .item .title），导致覆盖困难、调试失效，被迫依赖!important；应限制嵌套深度、善用&精确拼接、bem命名及@layer分层管理。
为什么嵌套过深反而让!important更难避免
嵌套本身不提高权重，但会生成冗余选择器，比如 .page .section .content .item .title 编译后是 5 个 class 连续后代匹配（c=5），看似“赢了”，实则埋下三个隐患：调试时 DevTools 里找不到对应规则、组件挪到新容器就失效、后续覆盖只能靠 !important 硬顶。Sass 官方推荐嵌套不超过 3 层，超过就该考虑语义重构。
- 检查编译后 CSS 的选择器长度——如果出现超过 4 个 class 连续空格拼接，说明嵌套已失控
- 用
stylelint-config-sass-guidelines配置max-nesting-depth: 3自动拦截 - 父级 class 不是“为了提权而加”，而是为了锁定作用域：比如
.modal .btn比全局.btn更安全，不是因为权重高，而是因为它天然隔离了干扰
用 & 精确控制拼接逻辑，而不是靠缩进猜
& 只代表最近一层父选择器的完整字符串，不是视觉上的“上一级”。写错一个空格，& 就指向错误目标。比如在 .card { .header { &__title { ... } } } 中，& 是 .header，不是 .card，结果生成的是 .header__title 而非预期的 .card__title。
- 想拼接外层上下文？用变量暂存：
$block: ".card"; #{$block} { #{$block}__title { ... } } - 确认
&前有没有空格：有空格是后代选择器，没空格才是直接拼接 - BEM 场景下必须依赖
&拼接，否则命名断裂会导致样式丢失，这不是 bug，是 Sass 的设计机制
@layer 是比 !important 更可控的优先级管理方式
CSS 原生的 @layer 允许你显式声明层级顺序，比如 @layer base, theme, overrides;，之后所有 @layer theme { ... } 的规则天然高于 @layer base，且无需 !important。它不破坏层叠逻辑，只是提前划好“地盘”。
- 第三方库样式建议放入
@layer vendor，自己业务样式放@layer app，覆盖逻辑一目了然 - Sass 中需确保输出为标准 CSS：用
@use "sass:meta"不影响@layer，但老版本构建工具可能不识别，需检查最终 CSS 是否保留了@layer声明 - 注意浏览器兼容性：Chrome 99+、Firefox 97+、Safari 15.4+ 支持，旧版需降级 fallback（如用 class 组合兜底）
什么时候真该用 !important？只有一种情况
仅当需要清空第三方库内联样式或强制重置原子级属性（如 box-sizing、margin）时，才在基础重置层用 !important。例如：%reset-box-sizing { box-sizing: border-box !important; }，然后在组件中 @extend %reset-box-sizing。除此之外，所有业务样式都不该出现 !important。
- 检查 DevTools 的「Computed」面板：如果被划掉的规则也带
!important，说明你正陷入权重恶性循环 - JS 直接写入的
style="color: red !important"永远高于外部 CSS 中的!important，此时加再多也没用 - 滥用
@extend复制带!important的规则，会隐式传播不可控权重，应改用@mixin或 class 组合
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
