跨系统样式复用必须外链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，不出三个月就各系统长得不一样。真正可持续的方式是「变量下沉 + 工具链注入」。
