BEM命名无法解决多应用CSS污染，因其缺乏运行时隔离；真正有效需全局唯一block名、独立打包加载、属性选择器兜底及禁用全局注入。
单靠 BEM 命名无法解决多个应用之间的 CSS 污染——它不提供运行时隔离，只靠类名约定降低冲突概率。真正起效的前提是：每个应用的 BEM block 名必须全局唯一，且所有样式必须严格限定在各自作用域内加载。
为什么 .user-card 在 A 应用和 B 应用里会互相覆盖
BEM 类名本身不带运行时沙箱，.user-card 在浏览器眼里就是个普通选择器。如果 A 应用和 B 应用都引入了含 .user-card 的 CSS 文件（哪怕命名完全合规），后加载的那个就会生效，尤其当它们共用同一 CDN 或被拼进同一个 bundle.css 时。
- 常见错误现象：
user-card__avatar在 A 应用中是圆角，在 B 应用中突然变方角——不是代码改错了，是 B 应用的 CSS 被打包进了同一份文件，且 specificity 更高或加载更晚 - 根本原因：BEM 不改变 CSS 层叠规则，也不阻止外部样式匹配；它只帮你“不写错”，但拦不住别人“加载进来”
- 跨应用场景下，block 名必须带业务/项目前缀：
salesforce-user-card✅，user-card❌（太泛，两个团队极可能撞车）
如何让 BEM 在多应用共存时真正生效
关键不是“怎么写类名”，而是“怎么加载、怎么限定、怎么隔离”。BEM 在这里只是语义层，真正隔离靠构建与部署策略。
- 每个应用的 CSS 必须独立打包、独立加载，禁止合并到全局
common.css；否则salesforce-user-card和hr-system-user-card仍会在同一张样式表里竞争 - 服务端渲染或微前端场景下，在外层容器加唯一属性标识：
<div data-app="salesforce">...</div>，然后用属性选择器兜底：[data-app="salesforce"] .salesforce-user-card - 第三方组件（如 Ant Design）不能直接裸用
.ant-btn，必须包裹在应用级 block 内：<div class="salesforce-form"><Button /></div>，再配 CSS：.salesforce-form [class^="ant-"] - 禁用全局 CSS 注入机制：Webpack 的
mini-css-extract-plugin默认全局注入，需配合css-loader的modules: true或使用scope属性（如 Vue 的<style scoped>）进一步约束
动态插入 DOM 或 JS 控制类名时最容易漏掉的点
很多污染发生在运行时——JS 拼接类名、框架动态添加、埋点 SDK 清洗 class 属性，都会让 BEM 失效。
立即学习“前端免费学习笔记（深入）”；
- 禁止用字符串拼接：
el.className = 'user-card__' + type + '--' + state→ 既难 debug，又易 XSS，且破坏命名可追溯性 - 所有动态类名必须显式声明、静态写出：
classList.toggle('salesforce-user-card--loading')，不能省略前缀 - 微前端子应用挂载后，检查 DevTools Elements 面板，确认
class="salesforce-user-card salesforce-user-card--active"是原样存在的，不是被主应用脚本改成了空字符串或驼峰格式 - 若用 CSS-in-JS（如 emotion），BEM 命名应作为组件导出名的一部分：
const SalesforceUserCard = styled.div`...`，而非仅用于 class 字符串
最常被忽略的是：BEM 的隔离效果，不取决于你写了多少 __ 和 --，而取决于是否所有相关样式都只通过那个唯一 block 名注入，且没有一处漏掉前缀、没有一行后代选择器、没有一个构建配置偷偷合并了 CSS。
