根本原因是层叠顺序和源码位置决定最终生效规则，后加载或更具体的样式会覆盖前者；CSS Modules仅隔离作用域，不解决语义一致性；真正有效的是语义化命名、单一入口和CSS自定义属性。
为什么 .btn 在多个 CSS 文件里被反复定义会导致样式失效？
根本原因不是“重复定义”本身，而是层叠顺序（cascade）和源码位置决定最终生效的规则。浏览器不会报错，但后加载、权重更高或更具体的规则会覆盖前面的——你看到的“没生效”，其实是被悄悄替换了。
- 同一选择器在不同
<link>中出现时，后引入的文件优先 - 同一文件中，后面声明的
.btn规则覆盖前面的（无视顺序只看源码行号） -
.btn:hover和.btn不算重复，但它们共用基础类，容易因局部修改破坏整体一致性
CSS Modules 是不是解决重复定义的银弹？
它能隔离作用域，但只对组件化场景有效，且不解决全局类名冲突本身——比如你仍可能在两个模块里都写 styles.button，编译后变成 Button_button_abc123 和 Modal_button_def456，名字不冲突，但视觉和行为可能不一致。
- 适合 React/Vue 单文件组件，不适合纯 HTML + 外链 CSS 的老项目
- 无法约束设计系统层面的语义一致性（比如
primary按钮在按钮组件和表单组件里颜色不统一） - 调试时 class 名变长，DevTools 里看到的是哈希串，排查来源需依赖构建工具支持
真正管用的样式管理三原则
不靠工具封印，而靠约定落地：
-
禁止直接写
.btn这类泛化类名：改用语义化前缀，如.c-button（component）、.t-card-header（template）、.u-text-small（utility） -
所有基础样式必须走单一入口：比如只允许在
src/styles/base.css里定义.c-button，其他文件只能用@import或构建时注入，不能重写 -
用 CSS 自定义属性替代硬编码值：把
color: #007bff换成color: var(--color-primary)，全局色调变更只需改一处变量声明
:root {
--color-primary: #007bff;
--space-md: 1rem;
}
.c-button {
padding: var(--space-md);
color: var(--color-primary);
border: 1px solid var(--color-primary);
}
PostCSS 插件能自动发现重复定义吗？
可以，但得选对插件：postcss-discard-duplicates 只删完全相同的规则，对看似重复实则上下文不同的（比如一个在 @media 里、一个不在）无能为力；stylelint 的 no-duplicate-selectors 规则更实用，但它默认只报「完全相同的选择器在同一文件中多次出现」，需配合 stylelint-selector-bem-pattern 等扩展才能识别语义重复。
立即学习“前端免费学习笔记（深入）”；
- 启用前先跑一遍
npx stylelint "**/*.css" --fix，它会自动合并相邻的同选择器规则 - 注意：它不会警告
.btn和.button这种命名差异但功能重叠的情况——这得靠人工 Review 或设计系统文档约束 - CI 流程里加一条检查，比靠人眼盯代码更可靠
.btn-primary、.primary-btn、.main-button，最后 UI 走样了还互相找不到源头。类名规范和 PR 检查流程，比任何工具都关键。 
