CSS类名重复不会报错但会导致样式覆盖，需通过权重、顺序、DevTools定位及BEM、CSS Modules、@layer等策略可控管理。
CSS 类名重复本身不会报错，但会导致样式被意外覆盖，最终渲染效果不符合预期。
浏览器按 CSS 选择器权重和声明顺序决定最终样式
两个相同类名的规则，后定义的会覆盖先定义的（同权重下）；如果一个在 style 标签里，一个在外部 .css 文件中，加载顺序和位置共同影响结果。开发时容易误以为“写对了”，实际生效的是另一个同名规则。
- 权重相同时，
body .header .nav-item比.nav-item优先级高，哪怕后者写在后面 - 内联样式（
style="color: red;"）权重最高，会覆盖所有类名规则 - 用
!important强行提升优先级虽能临时解决，但会让调试变困难、后续维护成本升高
如何快速定位是哪个类名在起作用
Chrome DevTools 的 Elements 面板里，选中元素后右侧 Styles 栏会列出所有匹配的 CSS 规则，已失效的规则会被划掉，带灰色删除线；当前生效的会高亮显示，并标注来自哪个文件和行号。
- 点击右侧文件路径可跳转到源码，确认是否引入了重复类名的第三方库（比如两个 UI 组件库都定义了
.btn） - 右键“Force state”可模拟
:hover等状态，验证不同状态下是否又触发了另一套同名类的样式 - 勾选 “Show all” 可看到被层叠掉的规则，方便对比差异
避免冲突的实用策略
不是靠“不重复”，而是靠“可控重复”：用命名约定 + 作用域控制缩小影响范围。
立即学习“前端免费学习笔记（深入）”；
- 采用 BEM 命名法，如
.card__title--large，语义明确且天然降低重名概率 - 使用 CSS Modules（React/Vue 中），让
import styles from './Button.module.css'中的styles.primary编译为唯一哈希类名（如Button_primary_abc123） - 在 Shadow DOM 或
中隔离样式，完全避免全局污染（适合微前端或插件场景） - 用
@layer显式声明层叠顺序（现代浏览器支持），把基础样式、组件样式、覆盖样式分层管理
.base { color: #333; }
.component { background: #f0f0f0; }
.override { color: red !important; }
@layer base, components, overrides;
@layer base { .base { color: #333; } }
@layer components { .component { background: #f0f0f0; } }
@layer overrides { .override { color: red; } }
真正难处理的不是“类名重复”，而是多个团队共用同一份 CSS 文件、或长期迭代中没人清理废弃类名——这时光靠命名规范不够，得配合构建时的 CSS Scope 工具或 PostCSS 插件做静态分析。
