CSS变量能解决重复硬编码、主题切换难、响应式计算繁琐、跨组件样式不一致四类痛点：通过语义化命名、分层作用域、calc()配合变量及data-theme控制，实现高效维护与动态主题切换。
能解决重复硬编码、主题切换难、响应式计算繁琐、跨组件样式不一致这四类高频维护痛点。
重复颜色/间距值导致全局替换崩溃
当品牌色从 #4285f4 改成 #34a853，传统写法要搜遍所有 CSS 文件改几十处；CSS 变量只需改一行：:root { --primary-color: #34a853; }，所有 var(--primary-color) 自动生效。
- 别把变量名起成
--blue或--20px，要用语义名如--color-brand-primary - 基础变量统一放
:root，但组件专属变量（比如--button-height）建议在组件选择器内定义，避免污染全局 - 修改后记得检查 DevTools 的 Styles 面板——点击变量名旁的箭头能直接跳转到定义处，比全文搜索快得多
主题切换时样式散落在各处无法集中控制
深色模式不是简单换几个 class，而是整套视觉体系的切换。用变量配合属性选择器就能干净解耦：
:root {
--bg: #fff;
--text: #333;
}
[data-theme="dark"] {
--bg: #1f2937;
--text: #f1f1f1;
}
body {
background-color: var(--bg);
color: var(--text);
}-
[data-theme="dark"]必须写在:root变量之后，否则优先级不够，值不会覆盖 - 不要用
!important强行覆盖变量值——它会切断变量链，调试时根本看不出当前值从哪来 - JavaScript 切换主题时，用
document.documentElement.setAttribute('data-theme', 'dark')，别直接操作style.setProperty，否则和 CSS 层叠逻辑冲突
calc() 嵌套满天飞，改个基础间距就得全文件重算
以前写 padding: calc(20px * 1.5)，现在基础单位抽成变量后，calc() 只负责真正需要运行时计算的部分：
立即学习“前端免费学习笔记（深入）”；
:root {
--spacing-unit: 8px;
}
.card {
padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 4);
width: calc(100% - var(--spacing-unit) * 6);
}- 变量本身不能直接参与运算（比如
var(--spacing-unit) * 2是非法的），必须包在calc()里 - 回退值只对
var()有效，calc(var(--x, 8px) * 2)是错的——var()的第二个参数不能出现在calc()内部 - 如果项目用 Vite/Webpack，确保 PostCSS 插件（如 postcss-custom-properties）没开启「将变量编译为静态值」，否则就失去动态能力了
组件间样式不一致，比如按钮圆角有的 4px 有的 8px
靠约定不如靠约束。把设计系统层级的变量分层管理：
- 设计系统层（
:root）：用前缀--size-radius-sm、--size-radius-lg，值固定不可变 - 组件层（
.button）：可覆盖局部变量，如.button { --radius: var(--size-radius-sm); }，内部用border-radius: var(--radius) - 业务层（
.checkout-button）：只通过 class 覆盖，不定义新变量，避免失控
最易被忽略的是作用域继承规则：变量沿 DOM 树向下传递，但不继承给伪元素的 content 属性——::before { content: "icon-" var(--name); } 是非法语法，得用 JS 注入或预设完整字符串变量。
