根本原因是样式无序注入全局作用域导致层叠冲突，而非类名长度；硬加项目前缀加剧耦合与维护成本；真正有效的是构建层隔离，如强制作用域声明、BEM白名单校验、禁用全局CSS中BEM语法、封装className生成逻辑及启用CSS Modules。
跨团队复用 CSS 组件时出现样式错乱，根本原因不是类名“不够长”，而是多个团队的样式被无序注入到同一全局作用域——.button 和 .user-card__avatar 都在 app.css 里，后加载的规则直接覆盖前者，浏览器不认“谁写的”，只认层叠顺序和权重。
为什么硬加项目前缀（如 myapp-button）反而让问题更糟
这不是语义洁癖，是工程现实踩出来的坑：
-
myapp-button把组件和项目强绑定，一旦要迁移到另一个中台系统，所有类名、JS 拼接逻辑、测试断言全得重写 - 第三方库（如
ant-btn）和你的myapp-button依然共存于全局作用域，照样被同一份base.css或 CDN 样式覆盖 - JS 层拼字符串极易出错：
myapp-button--primary少个连字符、myapp-button__icon多个空格，就导致样式丢失且 CI 不报错 - BEM 的 block 名本应表达功能（
search-form），不是项目标识；塞进myapp直接破坏语义可读性，后续想上 CSS Modules 或 Shadow DOM 时，所有手写前缀都得推倒重来
真正起效的是构建层隔离，不是人脑记命名规则
光靠规范文档没用，必须让工具守住边界。以下三件事 CI 中必须强制执行：
- 所有新组件 CSS 文件开头加注释声明作用域：
/* @scope product-list */，CI 扫描缺失标记即失败 - 用
postcss-bem-linter配置componentName白名单，例如只允许 block 是['button', 'card', 'search-form']，禁止出现.my-button或.header-nav-item - 禁用全局 CSS 文件（如
base.css）中出现__或--，这类文件只放html、body、h1等基础重置
JS 动态拼 className 必须封装，不能手写字符串
手拼看着快，实际是定时炸弹：
立即学习“前端免费学习笔记（深入）”；
- ❌ 危险写法：
className={`button button--${variant} ${hasIcon ? 'button__icon' : ''}`}—— 缺空格、大小写错、button__icon脱离 block 上下文，本地开发可能侥幸通过，CI 构建环境大小写敏感就挂 - ✅ 推荐封装常量：
const BLOCK = 'search-form'; const cn = (e, m) => `${BLOCK}${e ? '__' + e : ''}${m ? '--' + m : ''}`，调用cn('input', 'disabled')得到search-form__input--disabled，结构可控、可测试、可 lint - 若用 React，优先引入
clsx，配合 CSS Modules 导出对象使用：className={clsx(styles.button, styles.primary)}，避免字符串拼接带来的不可控性
CSS Modules 不是“可选项”，而是隔离底线
BEM 写得再规范，如果没启用 CSS Modules，它就只是语义更清楚的全局污染：
- Webpack/Vite 中确保
.module.css或.module.scss文件被css-loader正确识别，modules: { mode: 'local' }必须开启 - 第三方库样式无法自动模块化，需用
:global(.ant-btn)显式透出，但仅限动画、keyframes 等必须全局访问的场景 - Vue 中
<style module>和<style scoped>不等价：scoped只加属性选择器，不防同名类在不同组件共存；module才真正哈希化类名
最容易被忽略的是：BEM 命名本身不提供隔离，它只是把冲突从“随机覆盖”变成“结构错误可查”；而真正的隔离，必须由构建工具强制落地——否则所有命名约定，都是给未来埋雷。
