主题变量须按语义分层组织，颜色用--color-、空间用--space-/--size-、字体用--font-、动画用--transition-；深色主题通过[data-theme="dark"]覆盖而非多css文件；尺寸用无单位数值配合calc()、颜色用color-mix()；js修改前需校验作用域与继承链。
主题变量必须按语义分层组织，不能堆在 :root 里
把所有 --color-primary、--spacing-md、--font-heading 全塞进一个 :root 块里，短期看着省事，半年后改一个按钮圆角就得翻十页 CSS。真正可维护的主题系统，变量要按维度拆开：
- 颜色系统：用前缀
--color-（如--color-primary、--color-surface-1），避免裸名--blue或--main - 空间与尺寸：统一用
--space-或--size-（如--space-lg、--size-avatar-sm） - 字体与排版：用
--font-+ 功能命名（--font-body、--font-size-h2） - 动画与过渡：独立出
--transition-系列（--transition-duration-fast、--transition-easing-standard）
这样做的好处是：搜索替换精准、设计系统对接清晰、团队协作时不会因命名冲突覆盖他人变量。
深色主题不要新建 CSS 文件，而是用 data-theme 属性覆盖
用 <link href="light.css"> 和 <link href="dark.css"> 切换，会触发样式重载、页面闪烁、FOUC（Flash of Unstyled Content）。更稳的方式是只加载一份 CSS，靠 DOM 层级控制变量值：
- 默认主题写在
:root里 - 深色主题写在
[data-theme="dark"]选择器下，直接重定义同名变量 - 切换时只需
document.documentElement.setAttribute('data-theme', 'dark') - 配合
localStorage保存上次选择，并在页面初始化时同步设置
注意：不要用 .dark 类名去覆盖，因为类名优先级低，容易被组件内联样式或更具体的选择器压过；data-theme 属性天然具有更高权重，且语义明确。
变量值尽量用无单位数值或函数，别硬编码 px / rem
写 --size-button: 44px 看似直观，但一旦要响应式适配或支持缩放，就得改遍所有地方。更灵活的做法：
- 基础尺寸用无单位数，比如
--size-unit: 4，然后在使用处组合：height: calc(var(--size-unit) * 1px)或padding: calc(var(--size-unit) * 0.5rem) - 字体大小用
clamp()：--font-size-body: clamp(0.875rem, 2.5vw, 1rem) - 颜色避免直接写
#165DFF，改用color-mix(in srgb, var(--color-primary), white 80%)实现透明度叠加（需浏览器支持）
这类写法让变量真正“可计算”，而不是静态快照——后续做动态缩放、无障碍高对比度适配时，改一处就能全局生效。
JavaScript 修改变量前，必须检查作用域和继承链
直接 document.documentElement.style.setProperty('--color-primary', '#ff6b6b') 看似简单，但容易踩坑：
- 如果某组件内部写了
.card { --color-primary: #3498db }，你的全局修改对它无效——变量被局部作用域拦截了 - 某些框架（如 React）可能把组件挂载在 shadow DOM 里，
document.documentElement根本触达不到 - 批量设变量时别用循环反复调用
setProperty，性能差；应拼成字符串一次性注入style属性
稳妥做法是：先确认目标元素是否在标准 DOM 树中，再用 getComputedStyle(el).getPropertyValue('--color-primary') 验证当前值，最后只修改真正需要更新的节点——通常是 html 或某个包裹容器，而非每个组件单独设。
主题系统最难的不是定义多少变量，而是让变量“活”起来：能被设计工具读取、能随用户偏好自动同步、能在 SSR 中预渲染、还能被辅助技术正确识别。这些细节不显眼，但一漏就导致整套主题在暗色模式开关、打印样式、屏幕阅读器播报时集体失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
