跨系统样式复用必须外链css或构建工具注入，禁用行内和style标签；需用BEM/CSS Modules/scoped隔离类名；变量应通过tokens.json+工具链统一生成并注入；第三方库须按需引入、加权控制与围栏限制。
html 样式代码怎么用：直接写 .css？
跨系统复用样式，第一关就是「怎么引入」。硬写在
里或用 行内写，看似快，实则锁死复用可能——改一处得翻 N 个 HTML 文件。真正能跨系统（比如微前端、多仓库共用 ui 组件）的，只有外链 或通过构建工具注入 CSS 模块。
但要注意：href 路径必须是运行时可解析的绝对路径或带版本前缀的相对路径（如 /Static/v2.1.0/base.css），否则换个部署目录就 404。本地开发用 file:// 协议加载外链 CSS 会被浏览器策略拦截，务必走本地 server（如 python -m http.server 或 vite dev server）。
CSS 类名冲突怎么破：BEM、CSS Modules 还是 scoped？
不同系统拼到一起，.btn 可能被 A 系统定义成蓝色，B 系统覆盖成红色，最终样式打架。这不是“谁写得晚谁赢”，而是缺乏作用域隔离。
-
BEM（block__element--modifier）靠命名约定规避冲突，适合纯手写、无构建流程的老项目，但人容易写错、难维护 -
CSS Modules（如import styles from './Button.module.css'）由构建工具自动哈希类名（Button_button__kx9f2），天然隔离，react/vue 都支持，但要求有打包流程 -
默认就 scoped
没构建工具？别硬套 CSS Modules。老系统升级可先加一层 data-Namespace 属性（如
[data-ui="system-a"] .btn { ... } 强制限定范围。立即学习“前端免费学习笔记（深入）”；
字体、颜色、间距这些基础变量怎么跨系统同步？
靠人肉复制粘贴 color: #333 或 font-size: 14px，不出三个月就各系统长得不一样。真正可持续的方式是「变量下沉 + 工具链注入」。
推荐做法：
- 把设计系统变量统一存为
tokens.json（含color.primary、spacing.md等键值对） - 用工具（如
style-dictionary）生成多格式输出：CSS 自定义属性（:root { --color-primary: #007bff; }）、scss 变量、JS 对象 - 所有系统都引用同一份生成后的
vars.css，再用var(--color-primary)调用
注意：IE 不支持 CSS 自定义属性，若需兼容，就得生成两套——一份现代版用 var()，一份降级版用 postcss 插件（如 postcss-custom-properties）静态替换。
第三方 UI 库（如 Ant Design、Element Plus）如何避免样式穿透和污染？
直接 @import 'ant-design-vue/dist/reset.css' 是最危险的操作——它会全局重置 button、input 等原生标签样式，你的主系统很可能瞬间变形。
正确姿势分三层：
- 只引入组件所需样式，而非全量 reset（如
import 'ant-design-vue/es/button/style/css'） - 用 CSS
@layer（chrome 110+）或@layer third-party { @import 'xxx.css'; } - 关键场景做样式围栏：给第三方组件外层加唯一 class（如
.ant-wrapper :where(*)限制作用域（:where()不影响优先级，适合兜底）
最后提醒一句：跨系统样式复用不是“抄一份 CSS 放过去”就能完事，真正的隔离靠的是构建时处理、运行时作用域、以及变量源头的统一管控——漏掉任何一环，后期维护成本都会指数级上升。