你在开发组件时常常遇到这样的困扰：精心编写的样式在页面渲染后仍被全局样式覆盖。打开开发者工具，发现全局选择器因顺序靠后而胜出，直接覆盖了你的局部样式。你可能会怀疑CSS Modules失效，但问题的根源其实更简单——优先级权重没有拉开。
为什么局部样式总被全局样式覆盖？CSS选择器优先级冲突解析
根本原因并非CSS Modules未生效，而是局部类名（如 .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命名规范避免CSS优先级堆叠？
BEM并非仅仅增加下划线，其核心在于让每个类名自带作用域语义，从而自然规避依赖嵌套层级赢得优先级的陷阱。例如 .card__title--large 是一个完整、独立、可预测的样式单元，无需借助 .card .title 这类结构来争夺权重。
在React/Vue等组件化框架中，每个视觉元素都应拥有明确的Block或Element级类名，切勿省略前缀以避免命名冲突：
- 正确做法：
，对应CSS中的.article__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__a vatar--small，就能明白它只负责头像尺寸，不会意外修改边框或颜色——这种克制，比任何 !important 都更有效。
