必须在:root中定义基础色变量并用var()安全引用，命名分层（如--color-primary-500）、禁用组件绑定名，所有var()须带fallback，主题切换优先用.dark类配合@media兜底，HSL+from语法支持动态计算但需注意浏览器兼容性。
直接在 :root 里定义颜色变量，再用 var() 引用，就能实现全局统一管理——这不是“可选技巧”，而是现代 CSS 颜色维护的底线做法。硬写 #3498db 或 blue 到每个选择器里，等于主动放弃可维护性。
怎么在 :root 中正确定义基础色变量
变量必须放在 :root（不是 html 或 body），才能确保全页面继承。命名要分层：先定义具体色值的基础变量，再映射语义用途，避免混用。
- 基础色变量名带色调层级，例如
--color-primary-500、--color-gray-200，不带业务含义 - 禁止用
--color-header-bg这类绑定组件的命名——换组件时变量就废了 - 十六进制、RGB、HSL 均可，但 HSL 更适合后续动态调整（如
hsl(var(--base-hue), 70%, 60%)） - 别在变量值里嵌套
var()，部分旧版 Safari 对var(--a, var(--b))解析不稳定
示例：
:root {
--color-primary-500: #3498db;
--color-gray-100: #f8f9fa;
--color-gray-900: #212529;
--base-hue: 210;
}如何用 var() 安全引用颜色变量
var() 不是万能胶水，它只在支持该属性的 CSS 属性中生效，且默认不回退——漏写 fallback 可能导致样式塌陷。
立即学习“前端免费学习笔记（深入）”；
- 所有使用处都加 fallback 值，例如
color: var(--color-text, #333) -
var()不能直接用于伪元素的content，也不能在@keyframes中跨作用域引用未声明变量 - 在
background复合属性里用var()要小心顺序，比如background: var(--bg-color) no-repeat;是合法的，但background: no-repeat var(--bg-color);会失效 - 不要在内联
style属性里写var()，浏览器不解析——内联样式无法访问:root变量
错误示范：<div style="color: var(--text-color)"> → 实际渲染为文字无色。<h3>切换主题时 class 和 media query 怎么配合</h3>
<p>手动切换主题靠增删 <code>dark 类，系统偏好靠 @media (prefers-color-scheme)，但两者不能简单叠加，否则优先级混乱、闪屏或覆盖失效。
- 默认
:root定义浅色变量；深色规则统一收口到.dark类下，而不是分散在@media块里 -
@media (prefers-color-scheme: dark)只作兜底，且需放在.dark规则之后，确保用户手动选择 > 系统设置 - JS 切换前必须清空旧主题类，例如先
document.documentElement.classList.remove('light', 'dark')，再加新类 - localStorage 读取必须在
的 script 中同步执行，晚于 CSSOM 构建就会闪白屏
典型结构：
:root {
--color-bg: #fff;
--color-text: #333;
}
.dark {
--color-bg: #121212;
--color-text: #fff;
}
@media (prefers-color-scheme: dark) {
:root:not(.light):not(.dark) {
--color-bg: #121212;
--color-text: #fff;
}
}为什么 HSL + from 语法比纯 hex 更值得投入
用 hsl(from var(--primary) h s calc(l - 20)) 这类写法，本质是把颜色当作可计算的数值空间来操作，不是炫技，而是解决真实痛点。
- 深色模式下，单纯换一个
--color-bg值，常导致文本对比度不足；用calc(l - 20)可确保所有衍生色同步变暗，无需逐个调参 - 生成互补色、三色组合、hover 明暗偏移，全部一行 CSS 解决，不用 JS 或预处理器编译
- 注意：Safari 15.4+、Chrome 111+、Firefox 110+ 才完整支持
from语法，旧版本需降级为静态变量对 - 不要在
from中引用未定义变量，例如hsl(from var(--missing) ...)会导致整条声明被忽略
真正容易被忽略的是：变量组织本身不是目的，而是为了支撑「设计决策可追溯」——当你改一个 --color-primary-500，整个系统响应是否符合预期，取决于你有没有把语义层和基础层真正切开。
