类名重复本身不是问题，真正导致样式覆盖的是CSS优先级和加载顺序；应通过嵌套结构限定作用域、加业务前缀、慎用!important并改用更具体的组合选择器来控制样式边界与上下文。
类名重复本身不是问题，真正导致样式覆盖的是CSS优先级和加载顺序。关键不是避免重名，而是让样式作用范围更精准、优先级更可控。
用嵌套结构限定作用域
把通用类名放在特定父容器下，天然形成作用范围隔离。比如两个都叫 .btn 的按钮，可以分别写成：
- .header .btn —— 只影响页头里的按钮
- .modal .btn —— 只影响弹窗里的按钮
这样即使类名相同，也不会互相干扰，也不需要改类名，维护成本低。
加业务前缀明确归属
在团队协作中，用简短、有意义的前缀标明模块或功能，比单纯靠优先级“硬刚”更可持续。例如：
立即学习“前端免费学习笔记（深入）”；
- .user-avatar 和 .product-avatar —— 比两个都叫 .avatar 更清晰
- .cart-btn、.checkout-btn —— 直接体现上下文，无需依赖父级选择器
前缀不是越长越好，关键是让开发者一眼看懂“这是谁的样式”。
慎用 !important，改用更具体的组合选择器
遇到覆盖时，第一反应不该是加 !important，而是检查是否能通过增加一层上下文来提升优先级。比如：
- 原冲突：两个 .text-muted 定义了不同颜色
- 优化后：.article .text-muted vs .sidebar .text-muted
这样既解决覆盖，又保留可预测性，后续调试也更容易定位来源。
基本上就这些。类名重复不可怕，可怕的是样式没边界、没上下文。控制好作用域，比拼命堆叠优先级更可靠。
