多人协作 class 名重复导致样式覆盖的解法是工具+规则约束命名：统一BEM规范、ESLint+stylelint校验、组件加命名空间前缀；配合postcss-bem-linter语法检查与项目级作用域声明，辅以CSS Modules或全局类显式处理，CI中强制拦截违规。
多人协作时 class 名重复导致样式覆盖怎么办
直接后果是：A 同学写的 .header 被 B 同学在另一个模块里重定义，结果首页导航栏突然变高了，还查不出原因。这不是偶然，是命名没隔离。
核心解法不是靠“大家自觉”，而是用工具+规则把命名约束住。推荐立刻落地的三件事：
- 统一使用 BEM 命名规范，强制结构化：
block__element--modifier，比如user-card__avatar--large，杜绝裸名.avatar - 在 ESLint 中接入
stylelint-selector-bem-pattern插件，对 CSS/SCSS 文件做实时校验 - 所有新组件必须带命名空间前缀，比如团队叫
fe-team，就用fe-team-button或fe-team-modal__content
PostCSS + postcss-bem-linter 能自动检查命名吗
能，但要注意它只校验语法结构，不保证语义唯一性。比如 .list__item 符合 BEM，但如果两个不同 list 模块都用了这个 class，照样冲突。
所以必须配合项目级约束：
立即学习“前端免费学习笔记（深入）”；
- 每个业务模块的样式文件开头加注释声明作用域，如
/* @scope product-list */ - 用
postcss-bem-linter配置componentName规则，限定 block 名只能来自预设白名单（如['button', 'card', 'form']） - 禁止在全局 CSS 文件（如
base.css）中写带__或--的类名，这类文件只放html、body、h1等基础重置
要不要用 CSS-in-JS 或 CSS Modules 彻底解决冲突
可以，但代价明确：构建链路变重、调试成本上升、部分老浏览器兼容性需额外处理。如果团队已用 Webpack/Vite 且项目是中大型 React/Vue 应用，CSS Modules 是更轻量的折中方案。
关键实操点：
- 开启
modules: { mode: 'local' }，确保import styles from './Button.module.css'中的styles.clickable编译后变成类似Button-module__clickable___3xK9f - 仍需规范命名，避免
.btn和.button在不同模块里同时出现——哈希只是兜底，不是命名懒惰的理由 - 全局类（如第三方 UI 库的
.el-button）必须用:global(.el-button)显式声明，否则会被模块化
上线前怎么快速发现潜在的 class 冲突
靠人眼扫代码不现实。推荐两个低成本检查方式：
- 用
grep -r '\.your-prefix-' src/ | wc -l统计某前缀总用量，再对比各模块目录下的数量分布，明显不均说明有人绕过了约定 - 在 CI 流程中加入
stylelint --custom-syntax postcss-html --fix，配合自定义规则检测重复 class 定义（例如同一 class 在多个 CSS 文件中出现且无@layer或@scope隔离）
module.exports = {
rules: {
'no-duplicate-selectors': true,
'selector-max-id': 0,
'selector-class-pattern': '^([a-z][a-z0-9]*)(-[a-z0-9]+)*(__[a-z][a-z0-9]*(-[a-z0-9]+)*)?(--[a-z][a-z0-9]*(-[a-z0-9]+)*)?$'
}
};真正难的不是工具配置，而是让所有人接受“多打几个字符换来的确定性”——尤其当紧急需求压过来时，最容易回退到 .wrap .box 这种命名。这时候，CI 报错比 Code Review 更管用。
