类名重复本身不是问题，真正导致样式覆盖的是CSS优先级和加载顺序；应通过嵌套结构限定作用域、加业务前缀、慎用!important并改用更具体的组合选择器来控制样式边界与上下文。

类名重复本身不是问题，真正导致样式覆盖的是CSS优先级和加载顺序。关键不是避免重名，而是让样式作用范围更精准、优先级更可控。

用嵌套结构限定作用域

把通用类名放在特定父容器下，天然形成作用范围隔离。比如两个都叫 .btn 的按钮，可以分别写成：

这样即使类名相同，也不会互相干扰，也不需要改类名，维护成本低。

加业务前缀明确归属

在团队协作中，用简短、有意义的前缀标明模块或功能，比单纯靠优先级“硬刚”更可持续。例如：

前缀不是越长越好，关键是让开发者一眼看懂“这是谁的样式”。

慎用 !important，改用更具体的组合选择器

遇到覆盖时，第一反应不该是加 !important，而是检查是否能通过增加一层上下文来提升优先级。比如：

这样既解决覆盖，又保留可预测性，后续调试也更容易定位来源。

基本上就这些。类名重复不可怕，可怕的是样式没边界、没上下文。控制好作用域，比拼命堆叠优先级更可靠。