最稳的 CSS 注入方式是直接操作 document.head 中的 style 标签，新建带唯一 ID 的 style 元素并 appendChild 到 head，优先使用 CSS 自定义属性传递主题值，避免 !important，注重生命周期管理。
直接改 document.head 里的 style 是最稳的注入方式
浏览器不拦、不触发 csp（除非你显式配了 style-src 'unsafe-inline' 以外的策略）、不依赖框架生命周期。所有现代前端环境都适用，包括 react/vue 的 ssr 页面、纯 html 静态页、甚至 electron 渲染进程。
常见错误是往 body 里塞 style —— 某些 CSS 选择器（比如 :root 或伪类）在 body 下失效；还有人用 innerHTML 覆盖已有 style 标签，结果干掉其他样式。
- 用
document.createElement('style')新建，再appendChild到document.head - 给
style元素加个唯一id（如id="theme-inject"），方便后续更新或移除 - 写 CSS 时优先用属性选择器（
[data-theme="dark"] .btn）或 class 前缀（.my-theme .card），避免污染全局
CSSStyleSheet.insertRule 适合运行时动态增删规则
比操作 innerHTML 安全，能精准控制某条规则的启停，也方便做主题切换动画（比如先改变量、再触发动画类）。但注意：它只对已挂载的 style 元素生效，且 IE 不支持。
典型误用是反复调用 insertRule 却不清理旧规则，导致规则表爆炸；或者没处理返回值——失败时不报错，只是静默忽略（比如语法错、索引越界）。
- 先用
document.styleSheets找到目标style元素对应的CSSStyleSheet - 插入前用
try/catch包一层，失败时打日志（insertRule报错信息很简陋，只能靠日志定位） - 删规则用
deleteRule(index)，别用textContent = ''清空整个 sheet
Theme 特有配置项必须走 CSS 自定义属性（--xxx）传递
硬编码颜色/尺寸进 CSS 字符串里等于放弃复用性。所有主题相关值都应该映射成 :root 下的自定义属性，再在组件样式中用 var(--color-bg) 引用。否则换主题就得重写整套 CSS。
立即学习“前端免费学习笔记（深入）”；
容易被忽略的是作用域和继承链。比如在 Shadow DOM 里，:root 是宿主文档的根，子组件若没显式继承（inherit 或 initial），可能拿不到值；又比如 Vue 的 scoped style 默认不透出变量。
- 在
:root声明默认值：:root { --color-bg: #fff; --radius: 4px; } - 主题切换时只改
:root下的变量，不碰选择器结构 - 需要局部覆盖时，用更具体的选择器重设变量：
.card.theme-high-contrast { --color-text: #000; }
别在 !important 上找安全感
加 !important 确实能压过大部分样式，但会锁死后续所有微调空间。一旦某个第三方组件也用了 !important，你就得加两个——然后别人再加三个，最后变成军备竞赛。
真正该做的是提升选择器权重：用属性选择器（[data-theme]）、嵌套层级（.theme-dark .btn）、或增加 class（class="btn btn-primary theme-dark"）。CSS 优先级是可预测的，!important 是反模式。
- 检查冲突样式时，用浏览器 DevTools 的“Computed”面板看最终生效来源，而不是猜
- 如果必须用
!important（比如覆盖某些库的内联样式），只加在变量引用处：color: var(--color-text) !important;，别加在声明本身 - Webpack/Vite 构建时可通过
css-loader的modules: { auto: true }避免 class 名冲突，比!important更可持续
最麻烦的不是怎么注入，而是注入之后谁来管生命周期——比如单页应用路由切换后，旧的 style 标签还在 head 里躺着，新主题的变量却没清掉老的。这点没人帮你兜底。
