CSS选择器优先级冲突时该怎样优化代码结构

根本原因是局部类名与全局类名权重相同（均为类选择器c=1），浏览器按层叠顺序取后者；CSS Modules仅哈希类名，不改变权重，需通过双重类名、父级限定或属性选择器安全提升权重。

为什么局部样式总被全局样式覆盖？

根本原因不是“CSS模块没生效”，而是局部类名（如 .btn_abc123）和全局类名（如 .btn）权重相同，都是「类选择器」，浏览器按层叠顺序取后者。Vite 的 CSS Modules 只做类名哈希，不改权重——.btn 和 .btn_abc123 都是 c=1，谁写在后面谁赢。

常见错误现象：Button.module.css 里写了 .btn { color: red; }，但页面上按钮还是蓝色；用开发者工具检查发现，全局 global.css 里的 .btn 规则排在后面，直接覆盖了。

• 别指望 CSS Modules 自动“隔离权重”，它只隔离命名空间
• 避免把全局样式写成宽泛的 .btn、.title，这是冲突源头
• 组件内不要依赖“外部类名存在”，比如 div.btn 这种组合在模块化环境下极不可靠

如何用 BEM 命名避免权重堆叠？

BEM 不是为了多写几个下划线，而是让每个类名自带作用域语义，从而天然规避「靠嵌套赢」的陷阱。一个 .card__title--large 就是完整、独立、可预测的单元，不需要靠 .card .title 这种结构去抢权重。

使用场景：React/Vue 组件中，每个视觉元素都应有 Block 或 Element 级类名，不能省略前缀。

立即学习“前端免费学习笔记（深入）”；

• 正确：<h2 class="article__heading">，对应 CSS 中 .article__heading
• 错误：<h2 class="heading">，再加个 .article .heading —— 这又回到权重竞争
• Modifier（如 --disabled）只表达状态，不用于布局微调；布局该用 --full-width 而非 --disabled

提升局部样式权重的三种安全方式

比起 !important，优先用结构优化提升权重。它不污染全局，也不破坏可维护性。

• 双重类名：.btn { &.btn { color: red; } } → 权重从 c=1 变为 c=2，稳压全局 .btn
• 父级限定：.my-button { .btn { color: red; } } → 实际生成 .my-button_abc .btn_def456，权重 c=2
• 属性选择器：.btn { &[class*="btn"] { background: blue; } } → 同样 c=2，且不依赖 DOM 结构层级

注意：!important 是最后手段。它掩盖问题而非解决——下一次修改就得加两个 !important，或删掉旧规则，没人敢动。

全局样式该怎么写才不打架？

全局样式不是不能写，而是得主动收窄作用域。与其对抗局部样式，不如让它“根本匹配不到”。

• 把宽泛的 .btn 改成 .global-btn 或 .legacy-btn，明确语义边界
• 用容器限定：.theme-legacy .btn，确保只有加了 theme-legacy 类的根节点下才生效
• 避免 ID 选择器（#app）滥用——它权重太高（b=1），后续几乎只能靠 !important 或内联样式覆盖

真正难的不是算权重，是让每个样式规则的意图清晰可见。当你看到 .user-card__avatar--small，就知道它只管头像尺寸，不会顺手改边框或颜色——这种克制，比任何 !important 都管用。