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 插件做静态分析。