跨系统样式复用必须外链CSS或构建工具注入，禁用行内和style标签；需用BEM/CSS Modules/scoped隔离类名；变量应通过tokens.json+工具链统一生成并注入；第三方库须按需引入、加权控制与围栏限制。
HTML 样式代码怎么用：直接写 <style></style> 还是外链 .css？
跨系统复用样式，第一关就是「怎么引入」。硬写在 <style></style> 里或用 行内写，看似快，实则锁死复用可能——改一处得翻 N 个 HTML 文件。真正能跨系统（比如微前端、多仓库共用 UI 组件）的，只有外链 <link rel="stylesheet" href="..."> 或通过构建工具注入 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 都支持，但要求有打包流程 -
<style scoped></style>（Vue 单文件组件）只对当前组件生效，底层也是属性选择器 + 哈希，但仅限 Vue 生态；Svelte 的<style></style>默认就 scoped
没构建工具？别硬套 CSS Modules。老系统升级可先加一层 data-namespace 属性（如 <div data-ui="system-a">），再写 <code>[data-ui="system-a"] .btn { ... } 强制限定范围。
立即学习“前端免费学习笔记（深入）”；
字体、颜色、间距这些基础变量怎么跨系统同步？
靠人肉复制粘贴 color: #333 或 font-size: 14px，不出三个月就各系统长得不一样。真正可持续的方式是「变量下沉 + 工具链注入」。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
推荐做法：
- 把设计系统变量统一存为
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+）或<style></style>加权控制优先级，把第三方样式包进低权重层：@layer third-party { @import 'xxx.css'; } - 关键场景做样式围栏：给第三方组件外层加唯一 class（如
<div class="ant-wrapper"><abutton></abutton></div>），再用.ant-wrapper :where(*)限制作用域（:where()不影响优先级，适合兜底）
最后提醒一句：跨系统样式复用不是“抄一份 CSS 放过去”就能完事，真正的隔离靠的是构建时处理、运行时作用域、以及变量源头的统一管控——漏掉任何一环，后期维护成本都会指数级上升。
