CSS变量应统一声明于:root，用功能导向命名（如--color-accent），配合状态类动态赋值，结合@media适配深色模式与响应式，并谨慎用于JS动态更新场景。
用--color-primary这类变量代替硬编码颜色值
硬写#007bff或hsl(204, 100%, 50%)会让变体一改全崩——比如深色模式切换时，所有组件里散落的#007bff都得手动搜改。CSS变量把颜色“抽出来”统一管，改一处，所有用var(--color-primary)的地方自动响应。
- 声明位置优先选
:root，确保全局可访问；若只在某个组件内变，可写在组件选择器里（如.btn），避免污染全局 - 别直接用
var(--color-primary)当默认值——万一变量未定义会出错，稳妥写法是var(--color-primary, #007bff) - 变量名别用
blue-500这种语义绑定具体值的命名，改主题时它就成谎言；推荐--color-accent、--color-border-subtle这类功能导向名
状态类名 + 变量组合控制悬停/禁用/焦点等变体
一个按钮有primary、outline、small、disabled多个维度，传统写法容易爆炸式增长（.btn-primary-outline-disabled）。用变量配合状态类，让样式逻辑回归“状态叠加”本质。
- 基础样式只设默认变量值：
.btn { --bg: var(--color-bg); --text: var(--color-text); } - 状态类只改变量：
.btn:hover { --bg: var(--color-bg-hover); }、.btn:disabled { --text: var(--color-text-disabled); --bg: var(--color-bg-disabled); } - 禁用态慎用
opacity: 0.5——它会让整个元素（包括子内容）变灰，且无法被pointer-events精细控制；变量改色更可控
用@media嵌套变量适配暗色模式和响应式
暗色模式不是简单换套颜色，常伴随对比度提升、阴影减弱、文字粗细微调。靠@media (prefers-color-scheme: dark)切变量，比写两套完全独立样式更轻量、更易维护。
- 变量声明要分层：根级设默认浅色值，
@media里覆盖为暗色值，避免重复声明整个:root - 响应式中别只改字体大小——
--spacing-xs、--radius-sm这类尺寸变量也该随断点缩放，否则小屏下圆角还是8px显得突兀 - 注意
prefers-color-scheme不支持iOS Safari 12.2以下，若需兼容老设备，得 fallback 到data-theme="dark"手动控制
JavaScript动态切换变量值的边界在哪
CSS变量能被JS读写，但别把它当成React state用——频繁element.style.setProperty('--bg', newColor)会触发重排，尤其在滚动或动画中。
立即学习“前端免费学习笔记（深入）”；
- 适合JS干预的场景：用户主题切换、夜间模式开关、A/B测试分组；不适合：每帧更新的动画色值（用
transition或@keyframes更稳） - 批量改多个变量时，别逐个
setProperty，改style.cssText或操作document.documentElement.style更高效 - 变量值带单位时（如
--size: 16px），JS里读取是字符串"16px"，计算前得parseFloat，漏处理会静默失败
变量本身不解决复杂逻辑，它只是把“变”的部分从CSS规则里拎出来——真正难的是想清楚哪些该变、谁来决定它怎么变、以及变的时候其他地方是否要联动。这一步没理清，变量越多越乱。
