代码审查中如何处理CSS类名重复导致的样式覆盖问题？

Newb.哲铭提问于 2026-02-16 18:09:30 阅读 18

前端

在审查同事的代码时发现，两个不同组件都用了.header类名：


.componentA .header {
  background: blue;
}

.componentB .header {
  background: red;
}

虽然当前样式没问题，但感觉嵌套层级深了容易冲突。想问问大家怎么规范类名避免这种情况？试过推广BEM命名法，但同事觉得写.component__header太麻烦，有没有更简洁的方案？

代码review

我来解答赞 2 收藏

反馈

1 条解答

FSD-春萍 Lv1

这个问题挺常见的，样式冲突确实会埋坑，尤其是项目大了以后。虽然 BEM 是个不错的方案，但我也懂，写那么长的类名谁都烦。

我的建议是用命名空间来处理，简单点说，给每个组件加一个唯一的前缀。比如：

.a-header {

  background: blue;

}



.b-header {

  background: red;

}

这样写起来比 BEM 简洁，也不会有深层嵌套的问题。关键是让团队养成习惯，看到前缀就知道是哪个组件的样式。

如果觉得手动加前缀麻烦，可以考虑用 CSS Modules 或者 CSS-in-JS，它们能自动生成唯一类名。比如在 React 里用 CSS Modules 的话，代码大概长这样：

import styles from './ComponentA.module.css';



function ComponentA() {

  return <div className={styles.header}>Header</div>;

}

对应的 CSS 文件也不需要改太多：

.header {

  background: blue;

}

编译后类名会变成类似 ComponentA_header__1a2b3 这种唯一值，完全避免冲突。

不过如果你不想引入新工具，那就定个简单的规范：所有公共样式用全局类名，比如 .btn、.card，而组件内部的样式必须加前缀。这事儿得和团队统一好，不然有人懒，问题还是会复发。

最后提一句，样式冲突这种问题越早解决越好，别等到后面样式复杂了再处理，改起来会更痛苦。

2026-02-16 18:10