BEM不推荐直接加项目前缀（如myapp-button），真正需加前缀的场景极少，仅限多团队共用打包CSS、微前端无样式沙箱、老系统硬引入未隔离CSS等情况；应通过构建工具自动注入前缀并排除第三方类名，JS层仍用原始BEM名配合clsx维护。
直接加项目前缀（如 myapp-button）不是BEM推荐做法，它会破坏BEM的语义收敛逻辑，反而让类名变重、维护变难；真正需要前缀的场景极少，多数是构建产物共用或微前端子应用注入顺序失控时才需干预。
什么时候真得加前缀？不是命名冲突，而是构建产物混用
BEM本身不防跨项目类名重复——button__text 和 Ant Design 的 button__text 碰巧同名，浏览器照样匹配。但这种情况实际极少发生，因为第三方库几乎不用BEM，更常用 ant-btn 这类带库名前缀的结构。
真正要加前缀的典型场景是：
- 多个团队共用同一份打包后的 CSS 文件（比如统一 UI 基建包），且无法启用
css-loader?modules - 微前端中子应用 CSS 被主应用全局注入，且子应用之间无样式沙箱
- 老系统以
<link>方式硬引入多个独立构建的 CSS，又没做资源隔离
这些情况下，靠命名自觉已不可靠，必须在构建层加物理隔离。
立即学习“前端免费学习笔记（深入）”；
怎么加才不破坏BEM结构和第三方兼容性
加前缀不是往每个类名前面塞字符串，而是用工具在构建阶段自动注入，且只作用于你自己的 block 范围：
- Webpack +
css-loader：配modules: { auto: true }，再用postcss-prefix-selector插件，规则写成prefix: '.myapp-'，它只会给.button、.button__icon这类你写的类加前缀，不会碰.ant-btn - PostCSS 单独跑：避免对
:global()或@layer内的选择器误处理，插件配置里排除/^\.ant-/、/^\.el-/等正则 - 禁止手写
myapp-button__icon--primary：这违反 BEM 原则（block 名不该含项目标识），也导致你无法复用社区组件命名习惯
加了前缀后，JS 拼 className 还安全吗
不安全——手拼字符串极易漏空格、错连字符、大小写不一致，尤其在 CI 环境下大小写敏感问题会暴露：
- ❌ 危险：
className={`myapp-button myapp-button--${variant} ${hasIcon ? 'myapp-button__icon' : ''}`} - ✅ 推荐：用
clsx+ CSS Modules 导出对象：clsx(styles.button, styles[`button--${variant}`], hasIcon && styles['button__icon'])，前缀由构建工具统一处理，JS 层仍写干净的 BEM 名 - ⚠️ 注意：
styles.button编译后是类似myapp-button_abc123的哈希名，但你在源码里永远只操作原始 BEM 类名，这是可维护性的关键
最常被忽略的一点：前缀解决不了注入顺序和 specificity 问题
即使你加了 .myapp- 前缀，如果 Ant Design 的 CSS 是在 HTML <head> 里第一个 <link> 引入的，而你的 .myapp-button 在后面，它依然可能被 .ant-btn:focus 这种高优先级规则覆盖。
这时不能只依赖前缀，得配合：
- 调整
<link>加载顺序，确保你的样式在第三方之后 - 必要时用属性选择器提高 specificity：
.myapp-button[data-v-xxx]（Vue scoped 场景） - 禁用业务代码里的
!important，它会让前缀失去意义——.myapp-button !important依然压不住.ant-btn:focus !important
