必须在:root中定义css颜色变量，命名以--开头、推荐hsl语义化命名，避免混用格式与重复声明；fallback仅在变量未定义时生效；深色模式宜用class切换而非媒体查询；js修改后需requestanimationframe确保读取最新值。
怎么在:root里正确定义颜色变量
必须写在:root里，不能塞进某个组件类或body选择器中——否则子元素读不到，或者继承链断裂导致部分地方失效。变量名必须以--开头，比如--color-primary，写成color-primary或$primary就不是 CSS 变量，浏览器直接忽略。
推荐统一用语义化命名 + HSL 格式存储，例如：
:root {
--color-primary: hsl(210, 75%, 55%);
--color-text: hsl(0, 0%, 20%);
--color-bg: hsl(0, 0%, 98%);
}这样后续调亮度、改饱和度时能用calc()动态算，比硬写#3b82f6灵活得多。
- 别混用 HEX 和 HSL：同一套色系全用 HSL，不然
lighten()这类推导没法自动化 - 避免在多个文件里重复声明同一变量，PostCSS 插件（如
postcss-css-variables）不跨@import解析，构建时会报Error: Cannot resolve variable --text - 不要给变量赋带单位的值（如
--spacing: 8px）混在颜色变量区，语义混乱且 IDE 补全失效
var()调用时 fallback 值为什么总不生效
常见现象是页面文字突然全黑/全白，DevTools 的 computed 面板里显示的值是var(--text-color, #333)原样字符串，而不是#333。这是因为 fallback 只在变量**未定义**时触发，而一旦变量被声明但值非法（比如写成--text-color: red;却用在background:里），浏览器不会降级，而是按无效值处理（等价于unset）。
- fallback 必须是字面量值：
var(--color, #ccc)✅，var(--color, var(--fallback))❌（第二个var()会被当作文本） - 变量本身没定义时，fallback 才起作用；如果变量已声明但值语法错误（如
--color: hsl(210, 75%);缺亮度），它仍算“已定义”，fallback 被跳过 - 降级写法要拆成两行：
color: #333; color: var(--text-color, #333);，老浏览器忽略第二行，新浏览器覆盖第一行
为什么深色模式切换后颜色闪烁
直接在@media (prefers-color-scheme: dark)里重设:root变量，比如:root { --color-bg: #111; }，会导致所有用到var(--color-bg)的元素同步重绘——按钮、卡片、导航栏一起闪，尤其在低端设备上明显。
- 更稳的做法是用 class 切换：
，然后定义:root.theme-dark { --color-bg: #111; }，避免媒体查询触发强制重排 - CSS 变量本身不可动画，想平滑过渡得靠属性监听：比如写
transition: background-color 0.2s;，再确保background-color引用的是var(--color-bg) - 别在每个组件内部重定义
--color-primary，局部覆盖会污染继承链，子组件可能意外拿到错误值
JS 动态改色时 getComputedStyle 读不到最新值
用document.documentElement.style.setProperty('--color-primary', '#ef4444')改完，立刻getComputedStyle(document.documentElement).getPropertyValue('--color-primary')可能还是旧值——因为样式计算是异步的，尤其在批量修改后。
- 读取必须用
getComputedStyle，不能用style.getPropertyValue，后者只读内联样式 - 若需确保读到新值，加个
requestAnimationFrame回调再读，或者监听transitionend（如果配了 transition） - 构建时工具（如 Vite 插件）注入变量，和运行时 JS 修改互不感知；PostCSS 插件在打包阶段就静态替换，JS 改的是运行时变量，两者不冲突但也不能互相覆盖
.card { --color-primary: #e53e3e; }看似只影响卡片，但它会让所有后代中var(--color-primary)都读到这个红，包括里面的.btn——而你原本期望按钮沿用全局蓝。这种问题不会报错，只会在视觉验收时才暴露。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
