微前端中CSS不隔离，.btn等全局类名会污染所有子应用；必须用BEM+data-app-id属性限定作用域，禁用后代选择器和裸类名，统一前缀并函数化生成类名。
微前端里直接写 .btn 就等于给所有子应用发共享内存钥匙
微前端（如 qiankun、Module Federation）本身不隔离 CSS，子应用挂载后所有 .btn 类都会进入全局样式表。哪怕你用 Webpack 的 css-loader?modules，只要主应用或另一个子应用没开 modules，它的 .btn 仍会生效——浏览器只看 DOM 上有没有这个类，不管它来自哪个包。
常见错误现象：antd 按钮变矮、自己写的 .modal 把子应用的弹窗遮罩层撑开、DevTools 里看到样式来源是 app2.css 却查不到是谁引入的。
- 别指望子应用单独加
<style scoped>或module.css就万事大吉——主应用的全局重置样式（比如button { margin: 0; }）依然会穿透 - 禁止在子应用中写
body .my-app button这类“越界选择器”，它会污染主应用或其他子应用的button - 所有子应用必须统一约定 block 命名前缀，比如都用
user-profile__、order-list__，不能一个写profile__，另一个写user__
block 名必须对应真实容器，且带唯一标识属性
BEM 的隔离效果，只在 block 被显式声明并绑定到 DOM 时才成立。光在 CSS 里写 .search-form__input 没用，如果子应用渲染时没给外层加 class="search-form"，那这个样式就完全静默失效——这反而是好事，总比误中其他元素强。
但微前端场景下更进一步：要让 block 可识别、可追溯、不被覆盖，得加一层机器可读的锚点。
立即学习“前端免费学习笔记（深入）”；
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 子应用根容器必须带
data-app-id="user-profile"这类唯一属性，而不是只靠 class - CSS 中优先用属性选择器限定作用域：
[data-app-id="user-profile"] .user-profile__header，避免被其他子应用同名 class 干扰 - 禁止用
.user-profile .header这种后代选择器——子应用挂载到body后，.header可能匹配到主应用的 header - 构建时若用 CSS Modules，BEM 类名应作为语义占位符，比如
styles['user-profile__submit']，而非拼字符串
第三方组件的样式怎么围住，而不是改掉
子应用用了 ant-design 或 element-plus，它们的 .ant-btn 不受你控制。想“隔离”不是去覆盖它，而是用 BEM 块名把它框进你的作用域边界里。
错误做法：写 .ant-btn { color: red; } —— 全局生效，影响其他子应用；正确做法是借力打力。
- 给第三方组件包一层 wrapper：
<div class="user-profile__form-field"><el-input></el-input></div> - 样式只写
.user-profile__form-field .el-input，不碰.el-input本身——这样即使el-input升级、DOM 结构变，你的样式影响范围也锁死在user-profile__form-field内 - 需要定制
ant-select时，用[data-app-id="user-profile"] .ant-select-selector，而不是:global(.ant-select-selector)，后者无差别命中所有地方 - 服务端渲染静态 HTML（如 SEO 页面）中第三方类名不可控？在外层加 block 容器：
<div class="user-profile">...</div>，再写.user-profile [class^="ant-"]兜底
动态类名拼接时，__ 和 -- 漏一个下划线就断链
JS 中用 clsx、classnames 或模板字符串拼 BEM 类名，是最容易破防的地方。漏一个 _，生成的类名就无法匹配任何规则，结果要么样式丢失，要么 fallback 到全局 .button 上。
例如：button__text--${size} 是对的，但 button__text-${size}（少一个 -）或 button_text--${size}（少一个 _）都会导致编译后类名错乱。
- 永远用函数封装 BEM 生成逻辑，比如
bem('button', { 'text': true, 'loading': loading })，而不是手拼字符串 - 禁止在 JSX/Template 中自由绑定裸名：
className="active"❌，className={styles['button--active']}✅ - Vue 中用
:class="bem('button', { disabled })"，React 中用cn(bem('button', { disabled })) - CI 阶段加
stylelint-selector-bem-pattern规则，自动拦截.button .icon这类后代选择器
__ 和 --，而是当某个子应用为了“快速上线”绕过 BEM，写了一行 .card { margin-bottom: 16px; }，它就会像病毒一样，在整个微前端沙箱里扩散——因为没人能阻止它被加载。 
