解读

在国内前端面试中，**“子应用”**通常指微前端架构下的独立子项目（如 qiankun、Micro-App、无界等方案）。面试官问“CSS 隔离”并不是想听你背插件名，而是想确认三件事：

1. 你是否理解**“样式冲突”产生的根本原因**（全局作用域、选择器权重、插入顺序、CSS-in-JS 副作用）。
2. 你是否能在Grunt 构建流水线里把“隔离”做成可重复、可验证、可灰度的工程化环节，而不是开发阶段手动补丁。
3. 你是否能给出落地成本、运行时性能、维护成本的权衡，避免“过度隔离”导致包体膨胀或热更新失效。
   因此，回答必须围绕“构建时处理 + 运行时兜底 + 验证机制”三板斧展开，并给出 Grunt 侧的具体任务设计。

知识点

1. CSS 作用域隔离模型
   • 构建时重写：CSS Modules、postcss-prefix-selector、postcss-scopeify。
   • 运行时隔离：Shadow DOM、qiankun 的 strictStyleIsolation、动态 style 标签 sandbox。
2. Grunt 插件生态
   • grunt-postcss：可链式调用 autoprefixer、postcss-prefix-selector、postcss-modules。
   • grunt-contrib-cssmin：在压缩前插入前缀，避免压缩后 sourcemap 错位。
   • grunt-string-replace：对子应用入口 HTML 注入自定义 data-namespace，供运行时脚本识别。
3. 国内微前端框架的样式坑
   • qiankun 的 experimentalStyleIsolation 只做到“动态添加/卸载”，不会自动前缀；一旦子应用用到了第三方库（Ant Design、Element Plus），库里的全局样式依旧会污染。
   • 无界方案虽然支持 Shadow DOM，但字体文件与图标路径会 404，需要构建时把 publicPath 改写成绝对地址。
4. 验证与回滚
   • 在 Gruntfile 里加 grunt-contrib-connect + grunt-contrib-watch，启动多子应用并行预览，用 grunt-htmllint 检测是否出现跨子应用的样式选择器重复。
   • 把“前缀一致性”作为门禁：CI 阶段跑 grunt style-isolate-check，若检测到未前缀的选择器直接中断合并请求，符合国内大厂“质量红线”要求。

答案

“我通常把 CSS 隔离拆成三步，全部固化到 Grunt 流水线，零手工干预。
第一步，构建时强制前缀。在子应用的 Gruntfile 里，先通过 grunt-postcss 链式调用 postcss-prefix-selector，把每个选择器统一加上子应用名作为命名空间，例如 .sub-app-order__；同时开启 postcss-modules 生成 xxx.module.css.d.ts，让 TypeScript 也能识别哈希类名。
第二步，运行时双重兜底。如果子应用是遗留项目，无法改类名，就再包一层 grunt-contrib-concat，把打包后的 css 注入到自定义 Web Component 的 Shadow DOM 内；同时用 grunt-string-replace 把字体和背景图路径替换成 CDN 绝对地址，避免 Shadow DOM 内部 404。
第三步，验证与门禁。用 grunt-contrib-connect 起本地多子应用并行服务，再通过 grunt-phantomjs 跑一遍“样式冲突自动化巡检”脚本：遍历所有计算后样式，若出现跨命名空间的重复规则，立即报错并输出 diff。整个流程在 GitLab CI 里跑，平均耗时 38 秒，已通过 200+ 子应用灰度验证，线上零样式回滚。”

拓展思考

1. “构建时前缀”与“运行时 Shadow DOM”能否同时开启？
   答：可以，但需权衡。Shadow DOM 会阻断外部主题变量（:root 里的主色号），对需要“一键换肤”的中台系统不友好；此时可降级为**“CSS 变量穿透”**方案：Grunt 阶段把主题变量抽成单独 theme.css，通过 grunt-contrib-copy 不加重前缀，供主应用动态注入。
2. 子应用使用 Ant Design 等组件库，如何批量隔离？
   答：AntD 的类名规律是 .ant-xxx，可在 postcss-prefix-selector 里加 ignorePattern: /^\.ant-/，单独走一份 grunt-replace 任务，把 .ant- 全局替换为 .ant-subAppOrder-，并同步替换 AntD 的 prefixCls 配置，保证组件内部弹窗、消息提示也带前缀。
3. 灰度回滚策略
   国内上线窗口短，建议把“样式隔离”做成特性开关：Grunt 打包同时产出 app.css（带前缀）与 app.legacy.css（不带前缀），在配置中心放开关，一旦线上出现样式错位，5 秒内切回 legacy 文件，无需重新发版。