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

作者：袖梨 2026-07-13

根本原因是局部类名与全局类名权重相同（均为类选择器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，或删掉旧规则，没人敢动。