真正生效的样式常被压在十几条灰色、带删除线的旧规则底下，每次改一个 color 都得手动点开每条往上翻父级是否存在；dom 节点类型变动或移除 wrapper 导致样式静默失效，说明选择器过度依赖标签名或冗余层级；四层及以上空格分隔选择器、scss 嵌套超三层、频繁使用 !important 或 @at-root、js 用深层选择器查询、主题样式耦合祖先类等，均表明选择器权重失控与结构强耦合。
看 DevTools 里“已计算样式”面板是否堆满被覆盖的规则
真正生效的样式常被压在十几条灰色、带删除线的旧规则底下，每次改一个 color 都得手动点开每条往上翻父级是否存在。这不是 UI 问题，是选择器权重和结构耦合已经失控的信号。
检查 HTML 结构微调后样式是否静默失效
把 <div class="card__header">
<h2 class="card__title"> 改成 <code><header class="card__header"><h2 class="card__title"></h2></header>，结果标题样式没了——说明你写了 .card__header h2 或 .card .card__header .card__title 这类依赖标签或冗余层级的选择器。
- DOM 节点类型（
divvsheader）变动就断样式 → 检查是否误用了类型选择器 - 删掉中间一层 wrapper（比如移除
.card__body容器）→ 样式消失 → 说明存在.card__body .card__title这种非必要嵌套 - 复制一段 HTML 到新页面，class 名全保留，但样式不生效 → 很可能依赖了外层某个未同步的祖先类（如
.dashboard .card .card__title）
搜代码里有没有超过 3 个空格分隔的类名
用命令快速扫：grep -r "\.[a-z]\+ \.[a-z]\+ \.[a-z]\+ \.[a-z]" src/。匹配出 .layout .main .content .card 这种四层空格分隔的选择器，基本就是维护雷区：改一处要同步三处，新人不敢动，CI 构建时也难拦截。
- SCSS 中
&嵌套超过 3 层，编译后大概率产出 4+ 级选择器 -
:not()或:has()本身不增加层级，但常和深层后代混用，Lighthouse 的complex-selectors审计会直接报红 - VS Code 的 CSS Peek 功能对
.a .b .c .d跳转经常停错位置，不是插件问题，是选择器语义已脱离人脑理解路径
团队协作中是否频繁出现 !important 或 @at-root 补救
当有人开始写 .card__title { @at-root .is-collapsed .card__title { ... } }，或者 PR 里突然冒出 !important 来压过 .modal .footer button.confirm，这就是维护成本爆炸的明确标志——不是加功能难，是改不动旧样式。
-
@at-root本意是提级逻辑上该平级的规则，不是给 4 层嵌套打补丁 - JS 里用
document.querySelector('.page .main .content .card .title')→ 后续 DOM 变动必然导致 JS 报Null，这种耦合比 CSS 更致命 - 主题切换时靠
.theme-dark .card .card__title控制颜色？应改为.card__title--dark或利用 CSS 自定义属性，避免把主题上下文塞进选择器链
card__header，整个区块的样式和 JS 行为就同时失效——这种 DOM 和 CSS/JS 的三重强耦合，才是深层选择器最难撕开的部分。
