不推荐硬加项目前缀如myapp-button，因其违背BEM语义原则、阻碍组件复用、无法解决注入顺序导致的样式覆盖问题，真正需通过构建工具（如css-loader modules或postcss-prefix-selector）自动隔离作用域。
不推荐在BEM类名里硬加项目简称前缀（如 myapp-button），这违反BEM语义原则，且解决不了真正的冲突根源。
为什么 myapp-button 是危险信号
BEM的block名本应表达功能或业务含义（如 user-card、search-form），不是项目标识。一旦写成 myapp-button：
- 它把构建产物绑定到具体项目，导致组件无法跨项目复用
- 第三方库（如 Ant Design）的
.ant-btn和你的.myapp-button依然可能被同一份全局 CSS 覆盖——前缀不解决注入顺序问题 - JS 层拼接类名时极易出错：
myapp-button--primary和myapp-button__icon大小写、连字符稍错就失效 - 后续想迁移到 CSS Modules 或 Shadow DOM 时，所有手写前缀都要重洗
真正要隔离的不是“名字”，而是“作用域”
类名重复本身不致命（button__text 和 card__text 不会互相影响），致命的是多个团队的 CSS 被无序注入到同一个全局作用域。典型场景包括：
- 微前端子应用共用主应用的
<style></style>标签，且无样式沙箱 - 基建组打包的
ui-kit.css被 A/B/C 三个业务团队直接<link>引入 - 老系统通过
document.write动态插入多个未隔离的 CSS 片段
这时候该干预的是构建链路，不是人肉改类名。
立即学习“前端免费学习笔记（深入）”；
安全加前缀的唯一方式：构建期自动注入
只对自有 block 生效，不碰第三方类名，JS 层保持原始 BEM 名：
- Webpack +
css-loader：启用modules: { auto: true }，配合postcss-prefix-selector插件，规则设为prefix: '.myapp-' - PostCSS 单独运行时：用正则排除第三方，如
exclude: [/^\.ant-/, /^\.el-/] - SCSS 中禁用嵌套生成后代选择器，避免
.myapp-button .myapp-button__icon这种权重失控写法 - JS 中永远用
clsx(styles['button'], styles['button--primary'])，而不是字符串拼接
最容易被忽略的一点：前缀不能替代注入顺序控制
即使所有类名都加了 .myapp-，如果 Ant Design 的 CSS 在 HTML 中 <link> 在你之前，它的 .ant-btn 规则仍可能因 specificity 更高而压过你的 .myapp-button。这时候得靠 !important（不推荐）、调整 <link> 顺序，或用 :where() 降权处理——前缀只是隔离手段，不是优先级保险丝。
