单靠bem命名无法避免微前端类名冲突，必须结合动态block前缀、运行时隔离、css变量前缀化及构建工具自动加前缀等手段。
单靠 BEM 命名无法避免微前端跨应用类名冲突——BEM 只管类名不重，不管子应用的 body 样式、@keyframes、CSS 变量、第三方库类名或全局 !important 规则泄漏。必须把 BEM 当作交付契约的一部分，配合构建约束和运行时隔离手段才真正有效。
block 名必须动态绑定子应用 ID
BEM 的 block 名不能写死为 button 或 form，而要带明确的应用上下文，比如 sales-portal__search-input。但硬编码 sales-portal 会导致部署路径变更后失效。
- 正确做法：从微前端注册配置中读取，如 qiankun 的
name字段，或通过window.__MICRO_APP_NAME__注入到子应用运行时 - 构建时也可用 Webpack DefinePlugin 注入：
APP_ID: JSON.stringify(process.env.APP_ID)，再在 SCSS/JS 中引用 - 禁止用项目目录名（如
src-sales）或 Git 分支名生成 block 前缀——它们和运行时无关，CI 构建会出错
禁用子应用全局 CSS 导入，改用模块化封装
子应用执行 import 'ant-design-vue/dist/reset.css' 或在 index.html 里加 <link href="/css/antd.css"> 是高危操作：qiankun 不去重，多个子应用加载同一份样式，最终谁生效取决于加载顺序，不可控。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 主应用统一提供带命名空间的 UI 库，例如打包
ant-design-vue并配置prefixCls="sales-ant" - 子应用只 import 组件 JS，不 import 任何 CSS；若需局部样式，必须走
CSS Modules或 Vue 的<style scoped></style> - 检查构建产物，确认
index.html中无指向/css/或node_modules的<link rel="stylesheet">
CSS 自定义属性必须加 app-id 前缀
--color-primary 这种裸名变量在微前端里是全局污染源：子应用在 body 上设 style="--color-primary: red"，主应用所有用该变量的组件立刻变色，且 DevTools 里查不到源头。
- 强制使用格式：
--{app-id}-{semantic-name}，例如--mf-sales-header-bg、--mf-crm-form-error-color - 禁止嵌套语义：
--mf-sales-form-input--error-border是错的，层级应由 BEM 类名控制 - JS 中动态设置变量必须走
document.documentElement.style.setProperty()，而非内联style="--color-primary" - 建议接入 ESLint 插件（如自定义规则
no-unsafe-css-var），拦截未加前缀的--*使用
构建层自动注入前缀，而非手写 myapp-button__icon
手写 myapp-button__icon 违反 BEM 原则（block 名不该含项目标识），也导致无法复用社区组件习惯。真正需要物理前缀的场景极少，仅限多团队共用未隔离 CSS 构建产物、或老系统硬引入多个 <link> 时。
- Webpack 场景：用
css-loader?modules配auto: true，再配合postcss-prefix-selector插件，规则设为prefix: '.mf-sales-'，且排除第三方类名（正则/^\.ant-/） - PostCSS 独立运行时：避免对
:global()或@layer内的选择器误处理 - 禁止在 JSX/模板中手拼带前缀的类名：
clsx('mf-sales-button', 'mf-sales-button--primary')→ 应保持原始 BEM 名，让构建工具自动处理
最容易被忽略的是修饰符（modifier）的使用边界：比如 sales-form__input--disabled 必须和 sales-form__input 同时存在，否则基础样式丢失；而 sales-form--compact 这类 block 级修饰符，一旦被其他子应用误复用，就会直接覆盖整个区块布局——它不像类名冲突那样显式报错，而是静默错乱。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
