CSS变量应在:root中定义语义化名称（如--space-md），供全站引用；暗色模式通过@media重设变量值实现响应式切换；调试需检查作用域、拼写及是否被高优先级样式覆盖。
怎么用CSS变量统一改字体、颜色、间距这些基础样式
直接在 :root 里定义一套变量，所有组件用 var(--color-primary) 这类写法引用，改一处就全页响应。比全局搜替换 #3b82f6 或 1rem 安全得多。
常见错误是把变量写在某个 class 内部（比如 .btn { --color: red; }），结果只有按钮能读到，其他地方读不到——变量必须挂到 :root 或足够上层的祖先选择器才真正“全局”。
-
:root是最稳妥的位置，等价于html元素，所有后代都能继承 - 变量名建议用语义化命名，比如
--space-md比--s2更易维护 - 避免用变量覆盖浏览器默认值（如
--line-height），容易干扰表单控件渲染
CSS变量如何配合媒体查询做暗色模式切换
不用写两套完全独立的样式表，靠 @media (prefers-color-scheme: dark) 重设变量值就行。关键在于：变量本身不生效，生效的是引用它的属性；所以只要变量值变了，所有 var(--bg) 就自动更新。
典型翻车点是忘了加 !important 或者层级冲突——比如某个组件自己写了 background: white，硬覆盖了 background: var(--bg)，变量再怎么变也白搭。
立即学习“前端免费学习笔记（深入）”；
- 暗色模式下优先重定义颜色变量，比如
--bg: #1e1e1e; --text: #e2e2e2; - 不要在媒体查询里重复定义整套变量，只覆盖需要变的那几个
- 用
prefers-color-scheme做基础判断，再加一个用户手动开关（存 localStorage），用 JS 动态切data-theme="dark"类更可控
为什么修改CSS变量后部分样式没更新
不是变量没生效，大概率是引用链断了：要么变量名拼错（var(--color-pirmary)），要么作用域不对（定义在子元素里），要么被更高优先级的普通声明覆盖。
调试时打开 DevTools，在 Elements 面板里点那个小箭头展开 computed 标签，搜 var( 能直接看到变量是否被解析、解析成什么值。比肉眼扫代码快得多。
- 检查控制台有没有
Invalid property value报错，常出现在变量值类型不匹配时（比如--size: 12;忘了写px，后面用在font-size: var(--size)就失效 - 变量不能用于
@keyframes或@media条件中，那些地方不支持运行时计算 - JS 修改变量要用
element.style.setProperty('--color', 'red')，别直接改style.cssText
哪些地方不该用CSS变量强行“全局化”
变量适合控制设计系统里稳定、复用的原子值（主色、圆角、基础阴影），但不适合动态内容或强上下文依赖的样式。比如按钮悬停色，如果每个按钮都要不同，硬塞进 --hover-color 反而增加耦合。
另一个高危区是动画性能：用变量驱动 transform 或 opacity 没问题，但拿它控制 width 或 height 会触发重排，卡顿明显。
- 组件内部私有状态（如
.accordion__panel[open]的高度）别用全局变量，用 JS 控制或 CSS 逻辑更清晰 - 字体族（
--font-family）可以设，但别指望靠它动态切中文字体——中文 fallback 链太复杂，变量没法解决渲染差异 - 服务端渲染（SSR）项目要注意：变量值在 HTML 发出时还没执行 JS，初始态得靠
:root静态定义兜底
变量不是银弹，它省的是重复声明，不是设计决策。该分组件就分，该留接口就留，别为了“统一”把逻辑全拧进 :root 里。
