★ FEATURED ARTICLE 接手过一个后台管理项目主色定的是 #1e88e5。上线第三周产品说这个蓝太互联网了换成 #4f46e5。我当时的第一反应不是改代码而是打开全局搜索把色值字符串敲进去看看一共有多少处——结果搜出来一百三十多条里面还夹杂着 rgba(30,136,229,0.1)、#1e88e5cc、linear-gradient(180deg,#1e88e5,#1565c0) 这些变体靠字符串匹配根本抓不全。那次改完花了整整一个下午还漏了两处。后来我把整套配色改成了 CSS 变量加 var() 的方案同样的事情变成了改一行。这篇文章就想把 CSS 变量这套东西讲透它是什么、为什么能动态改变颜色、作用域和级联怎么走、主题切换有哪几条落地路径、以及我踩过的那些坑。不管你是刚开始写 CSS 的新手还是已经用 Sass 变量写了一两年、想搞清楚两者区别的人下面的内容都能直接抄作业。1. 从一行颜色改十遍说起var() 真正解决的是什么问题CSS 变量官方名字叫 CSS 自定义属性CSS Custom Properties。写法上以两个短横线开头声明用 var() 函数引用:root { --color-brand: #1e88e5; } .btn { background: var(--color-brand); }就这么两行背后其实是浏览器解析机制上的一次升级。它不是什么语法糖也不是预处理器里的宏替换而是浏览器真正认识的一种属性——它存在于 DOM 树上参与级联可以被 JavaScript 读写可以在运行时改变。这四个特性加起来才是动态改变颜色这句话的底气。1.1 没有变量时同一个色值会以多少种面目出现我们拿一个真实按钮的样式举例。主色 #1e88e5 在实际样式表里通常会变成这些东西正常态背景是 #1e88e5悬停态是 #1565c0禁用态是 rgba(30,136,229,0.4)浅色标签背景是 rgba(30,136,229,0.12)焦点环是 rgba(30,136,229,0.35)渐变按钮是 linear-gradient(135deg,#1e88e5,#42a5f5)阴影是 0 4px 12px rgba(30,136,229,0.25)。同一个设计意图写出来是七种不同的字符串。你要改主色就得挨个把它们换算一遍还得保证换出来的新色在透明度、暗色变体上都合理。这件事的麻烦不在于难而在于繁琐且容易漏——尤其是团队里很多人写的情况下。把主色抽成一个变量之后悬停态可以写成color-mix(in srgb, var(--color-brand) 80%, black)或者直接引用另一个变量var(--color-brand-hover)透明变体可以统一由主色算出来。改动集中在变量声明区组件样式一行都不用动。1.2 CSS 变量和 Sass 变量的区别一句话讲清很多人第一反应是我用 Sass 已经有变量了为什么还要 CSS 变量。这两个东西虽然都叫变量但生效的时机完全不同。对比维度Sass / Less 变量CSS 自定义属性生效时机编译期产物里已经被替换成字面量运行期浏览器解析样式时求值编译产物变量本身消失只剩最终值变量留在 CSS 里原样送到浏览器JS 能否读写不能编译后就不存在了能setProperty / getPropertyValue是否参与继承不参与纯文本替换参与和普通 CSS 属性一样继承和覆盖响应媒体查询需要重复写编译块直接在选择器里改值即可调试体验只能在源码里看浏览器样式面板里可见、可临场改我的判断标准很简单写的时候方便用 Sass 变量跑起来还要变用 CSS 变量。前端的主题切换、用户自定义品牌色、跟随系统深色模式这些事情必须在运行时发生Sass 变量在这个场景里一点忙都帮不上因为它早在构建阶段就消失了。顺带说一句这两者不冲突。源码里用 Sass 变量做尺寸计算和循环生成产物里用 CSS 变量做运行时可变的颜色和主题是很常见的组合。2. 作用域与级联CSS 变量的查找顺序决定了它为什么能动态搞不清作用域规则是很多人用了半年 CSS 变量还总是改了不生效的根本原因。它的规则其实只有两条但每条衍生出的用法都挺有意思。2.1 自定义属性默认继承:root 只是最大的那个作用域我们习惯把变量写在:root里这让它看起来像全局常量。实际上:root就是 html 元素变量声明在 html 上所有后代元素通过继承拿到这个值。它不是全局变量而是最外层祖先上声明的可继承属性。这个区别在什么时候显现当你需要覆盖它的时候。任何元素都可以声明同名变量覆盖掉祖先传来的值规则完全遵循 CSS 的级联和继承元素自己声明的变量优先级高于继承来的值都不声明时沿着 DOM 树往上找用最近的那个祖先的值一路找到根都没有变量就是未定义此时才轮到 var() 的兜底值出场。要注意的是讨论变量覆盖时才是最近祖先优先而一旦涉及选择器匹配同一个元素就回到常规的特异性比较和书写顺序比较了。2.2 就近覆盖把变量当成组件的对外接口作用域规则最实用的地方在组件层。假设有一个按钮组件样式是这么写的.btn { background: var(--btn-bg, #1e88e5); color: var(--btn-fg, #fff); border-radius: var(--btn-radius, 6px); padding: 8px 16px; }默认它是个蓝色按钮。现在侧边栏里希望按钮是浅色风格我不需要写.sidebar .btn { ... }去覆盖一堆属性只要在侧边栏上重设这几个变量.sidebar { --btn-bg: #eef2ff; --btn-fg: #1e3a8a; --btn-radius: 4px; }侧边栏里所有按钮自动变成浅色小圆角。这种写法的价值在于按钮组件只暴露了三个变量作为对外接口内部结构、悬停逻辑、禁用态全部封装在组件自己的样式里。调用方不需要知道按钮内部是怎么实现的只要按约定设置变量就行。提示这种变量即接口的约定最好在团队的样式规范里写清楚前缀比如组件级变量统一用--btn-、--card-开头避免和全局语义变量撞名。2.3 fallback 的两种写法与一个常被忽略的细节var() 支持第二个参数做兜底var(--btn-bg, #1e88e5)。这里有个细节值得说清楚——逗号后面的所有内容都算兜底值包括逗号本身。所以下面这种写法是完全合法的.text { font-family: var(--font-ui, PingFang SC, Microsoft YaHei, sans-serif); }变量没定义时会整段用上后面的备选字体栈。然后是那个常被忽略的细节兜底只负责变量不存在这种情况不负责变量存在但值不合法。举个例子:root { --gap: 10 px; /* 注意 px 前面多了个空格 */ } .box { gap: var(--gap, 8px); }你以为会退到 8px实际结果是 gap 这个属性彻底失效变成它的初始值。原因在第 6 章会详细拆这里先记住结论兜底值救不了坏值。还有一个更隐蔽的写法var(--x,)空兜底。它是合法语法含义是变量没定义时这条声明就作废。偶尔有用——比如想让某个属性在变量缺失时完全不被设置而不是继承一个默认值——但绝大多数情况下写出来只会给自己添麻烦。3. 三种动态改色的落地路径与各自的适用边界动态改变颜色在实践里对应三种场景预设主题之间切换、用户任意指定颜色、跟随系统偏好。它们各自适合的实现方式不一样混用容易出问题。3.1 类名或属性切换最稳、最推荐的一条路把主题状态写在一个元素属性上用属性选择器整体替换变量html[data-themelight] { --color-bg: #f7f8fa; --color-surface: #ffffff; --color-text: #121417; } html[data-themedark] { --color-bg: #0f1115; --color-surface: #171a21; --color-text: #e6e8ec; color-scheme: dark; }切换时只改一个属性document.documentElement.dataset.theme dark;这条路的好处是样式逻辑全在 CSS 里JS 只负责改状态不碰任何具体色值。更关键的一点属性是标记页面渲染时就已经存在所以不会出现先亮后暗的闪烁——前提是属性值在首屏渲染前就设置好了具体做法在 4.3 里说。顺带提一句color-scheme: dark这行它让浏览器原生的表单控件、滚动条、默认背景也跟着进入深色风格。很多人只改了变量结果输入框还是白的就是这个属性没写。3.2 JS setProperty适合用户自选色和后端下发当颜色不是预设的几种而是用户从色盘里随便挑的或者从后端配置里读出来的品牌色就得用 JS 直接写变量const root document.documentElement; // 写入 root.style.setProperty(--color-brand, userPickColor);读取稍微有个小坑// 返回的是字符串前面带一个空格记得 trim const brand getComputedStyle(root) .getPropertyValue(--color-brand) .trim();这里有几个经验点值得记下来。第一getPropertyValue拿到的是计算后的值颜色会被浏览器规范化。你写进去#1e88e5读出来可能是rgb(30, 136, 229)。如果你的逻辑要比较两个颜色是否相等别拿字符串比容易失效。第二setProperty是往元素的 style 属性上写属于内联样式优先级比大多数选择器都高。如果你同时用>media (prefers-color-scheme: dark) { :root { --color-bg: #0f1115; --color-text: #e6e8ec; } }这段代码让页面在系统开启深色模式时自动变暗。它适合作为默认行为但用户手动切换必须能覆盖它。这里有个很多人踩过的细节媒体查询不增加选择器特异性。所以在媒体查询里写的:root权重是 (0,1,0)而html[data-themelight]是 (0,1,1)后者更高能正常覆盖。但如果你在媒体查询里写的也是html[data-themedark]那就变成同权重比顺序了很容易乱。我的做法是把三套逻辑分开系统偏好的规则放进媒体查询里的:root手动主题的规则用html[data-theme]属性选择器并且约定手动主题永远优先。这样无论系统是亮是暗用户点了切换就一定生效。3.4 三种方案的取舍对照方案典型场景生效粒度主要注意点属性/类名切换预设的亮暗主题、多套皮肤整棵子树属性要在首屏前写好避免闪白JS setProperty用户自选色、后端下发品牌色可精确到单个元素内联样式优先级高注意清理和单位媒体查询默认跟随系统偏好全局需保证手动切换能覆盖它实际项目里这三条经常会同时存在媒体查询给默认值属性切换给用户选择setProperty 处理动态色。关键是理清优先级别让它们互相打架。4. 一套能上线的主题配色系统三层 token >:root { --blue: #1e88e5; --gray-900: #121417; } .title { color: var(--gray-900); } .link { color: var(--blue); }能用但换主题时会崩。因为组件里引用的是原始色值你要做深色模式得一条条判断这个 blue 是当文字用还是当背景用、深色下该换成哪个蓝。变量名和它的用途脱节了。正确的做法是分三层第一层原始调色板只放值不做语义比如--palette-blue-500。这一层在主题切换时基本不变。第二层语义 token描述用途比如--color-text、--color-surface、--color-brand。主题切换改的就是这一层。第三层组件 token组件专属的可调项比如--btn-radius。默认值指向语义层需要局部微调时只改这一层。关键规则只有一条组件样式只引用第二层和第三层绝不直接引用第一层。这样换主题时只需要重写语义层组件样式一行不动。4.2 完整代码从调色板到组件/* 第一层原始调色板只在这层出现具体色值 */ :root { --palette-blue-400: #42a5f5; --palette-blue-500: #1e88e5; --palette-blue-600: #1565c0; --palette-gray-50: #f7f8fa; --palette-gray-200: #e3e6eb; --palette-gray-500: #5a6270; --palette-gray-900: #121417; --palette-white: #ffffff; } /* 第二层语义 token主题切换只改这里 */ :root { --color-bg: var(--palette-gray-50); --color-surface: var(--palette-white); --color-text: var(--palette-gray-900); --color-text-muted: var(--palette-gray-500); --color-border: var(--palette-gray-200); --color-brand: var(--palette-blue-500); --color-brand-hover: var(--palette-blue-600); --color-brand-soft: color-mix(in srgb, var(--color-brand) 12%, transparent); } /* 第三层组件 token */ :root { --btn-bg: var(--color-brand); --btn-fg: #ffffff; --btn-radius: 6px; --card-padding: 20px; }深色主题只覆盖第二层第一层的调色板原封不动html[data-themedark] { --color-bg: #0f1115; --color-surface: #171a21; --color-text: #e6e8ec; --color-text-muted: #9aa2b1; --color-border: #262b35; --color-brand: #5aa9ff; --color-brand-hover: #82c0ff; color-scheme: dark; }组件样式写成这样.btn { background: var(--btn-bg); color: var(--btn-fg); border-radius: var(--btn-radius); border: 1px solid transparent; padding: 8px 16px; cursor: pointer; transition: background-color 0.2s ease; } .btn:hover { background: var(--color-brand-hover); } .tag { background: var(--color-brand-soft); color: var(--color-brand); border-radius: 999px; padding: 2px 10px; }注意.tag那一段它的背景色是从主色算出来的不是另写一个色值。换主色时标签背景自动跟着变这就是语义层加 color-mix 的价值。4.3 加一个防闪白的初始化脚本用属性切主题有个前提属性必须在首屏渲染之前就存在否则用户会看到一次从亮到暗的跳闪。做法是在 head 里、样式表之前放一小段阻塞脚本script (function () { try { var saved localStorage.getItem(theme); if (saved light || saved dark) { document.documentElement.dataset.theme saved; } } catch (e) { /* 隐私模式下 localStorage 可能不可用忽略即可 */ } })(); /script三个要点。放 head 里、放在样式表之前是为了在浏览器首次绘制前就把属性设好。用 try/catch 包起来是因为某些浏览器的隐私模式下访问 localStorage 会直接抛异常不包的话整段脚本中断后面的逻辑就没了。只接受预设的两个合法值防止有人手动改了存储值导致属性变成奇怪的东西。切换时配一个函数function applyTheme(theme) { document.documentElement.dataset.theme theme; try { localStorage.setItem(theme, theme); } catch (e) {} }如果想要跟随系统这个第三档可以用matchMedia((prefers-color-scheme: dark))判断当前系统偏好把它的值作为没有存储时的默认值并且监听它的变化。5. 让颜色动起来property 与渐变过渡主题切换如果颜色能平滑过渡体验会好一大截。但这里有个容易搞混的点我当初就绕了很久。5.1 先分清两种过渡一种本来就好使很多人听说CSS 变量不能过渡其实这话不准确得分情况。第一种情况变量被用在background-color上元素本身写了transition: background-color 0.3s。这时候变量值一变background-color的计算值跟着变过渡正常触发颜色平滑变化。这条完全没问题也是主题切换最常用的做法——记得给需要过渡的属性加上 transition 就行别用transition: all容易牵连出意料之外的动画。第二种情况你想直接过渡变量本身写transition: --color-brand 0.3s或者在keyframes里改变量。这时候不生效。原因在于未注册的自定义属性在浏览器看来值类型是未知的两个未知值之间没法插值只能离散地跳变。5.2 property 注册类型让变量本身可插值property是给自定义属性登记户口的规则声明它的语法类型、是否继承、初始值property --glow { syntax: color; inherits: false; initial-value: transparent; } .pulse { --glow: transparent; box-shadow: 0 0 0 0 var(--glow); transition: --glow 0.6s ease, box-shadow 0.6s ease; } .pulse:hover { --glow: rgba(30, 136, 229, 0.5); }注册成color之后浏览器知道这是个颜色可以在两个颜色之间插值过渡就出来了。syntax支持的类型主要有color、length、number、percentage、length-percentage还有通配的*——但通配类型不能参与插值只是用来声明初始值和继承行为。注册还有第二个好处而且这个好处更实用注册过的属性值不合法时会退回 initial-value而不是让整条声明失效。这跟普通属性遇到非法值的行为一致比未注册变量那种invalid at computed-value time的坑要友好得多。有两个必填项容易漏syntax和inherits都是必填的少写任何一个整条 property 规则都会被忽略。另外inherits: false是我的常用选择把变量锁在声明它的元素上避免它意外地影响后代。浏览器支持方面property属于比较新的特性各家支持时间不一。用之前查一下目标浏览器的最低版本在需要兼容老版本的地方准备降级方案——最稳的降级就是不用它回到给元素加 transition那条路。5.3 渐变和色阶的过渡思路background-image上的渐变是另一回事它本身不是可插值属性直接写 transition 不会有动画。两种常见做法。第一种加一层伪元素只过渡 opacity.btn { position: relative; background: var(--color-brand); } .btn::after { content: ; position: absolute; inset: 0; background: linear-gradient(135deg, var(--color-brand), var(--color-brand-hover)); opacity: 0; transition: opacity 0.25s ease; } .btn:hover::after { opacity: 1; }这个方案兼容性最好我基本优先选它。第二种用 property 注册颜色变量在动画里改变量再用变量拼渐变。现代浏览器里能实现渐变本身的过渡代码更干净但对浏览器版本有要求属于锦上添花。顺便说一句色阶计算。以前要一个主色的浅色变体得手写 rgba或者拆分量.tag { background: rgba(30, 136, 229, 0.12); background: color-mix(in srgb, var(--color-brand) 12%, transparent); }两行叠在一起写前一行是给老浏览器的兜底后一行是新语法。这样既不牺牲新浏览器的自动联动也不至于在老环境里背景完全消失。这个新语法 老兜底的叠写习惯我建议在 color-mix 这类较新特性上统一用起来。6. 变量失效排查我踩过的五个坑这一章单独拿出来讲是因为 CSS 变量的报错方式很不友好——它基本不报错。声明合法用了没效果控制台安安静静。下面这五个坑我都踩过按踩到的频率排序。6.1 无效值在计算时被丢弃这是最重要的一条概念。自定义属性在声明的时候浏览器不做语法校验因为它不知道你打算把这个值用在哪个属性上。--x: 10 px在声明阶段完全合法因为它可以被用在content: 10 px这种场景。只有等到真正用到时浏览器才发现值对不上此时的行为叫invalid at computed-value time计算值阶段无效。处理方式是把该属性按unset处理多数属性就是回到继承值或初始值。关键点在于这个过程不会触发 var() 的兜底值。因为变量确实存在只是内容不合法兜底值是留给变量不存在的。常见的坏值写法错误写法问题正确写法--gap: 10 px数值和单位间多了空格--gap: 10px--color: # 1e88e5# 和色值间多了空格--color: #1e88e5--size: 12缺单位用在 length 上无效--size: 12px或calc(var(--size) * 1px)--w: 50% 100%想表达两个值但当成一个值用拆成两个变量排查方法在 DevTools 的 Computed 面板看该属性是不是出现了意料之外的初始值再去 Styles 面板看变量展开后的实际文本。6.2 拼不出字符串url(var()) 这种写法不成立我一度以为可以这么写.icon { background-image: url(var(--icon-path)); /* 无效 */ }不行。var() 替换的是整个属性值的组成部分但它不能把变量的内容当字符串拼进一个已经写好的函数里。正确做法是把整个url()放进变量:root { --icon-path: url(./icons/star.svg); } .icon { background-image: var(--icon-path); }同样的道理适用于animation-name、font-family里的字体名、grid-template-areas的区域名——都不能半截拼接只能整体放到变量里。唯一算得上拼接能力的是calc()里的算术运算--space: 8px; .card { padding: calc(var(--space) * 2) var(--space); }这也是为什么做间距系统时变量最好存基础单位倍数交给 calc 算而不是给每个倍数都建一个变量。6.3 媒体查询里不能用 var()下面这行代码是无效的media (min-width: var(--bp-md)) { /* 不生效 */ .grid { grid-template-columns: 1fr 1fr; } }原因是执行时机对不上。媒体查询的条件在解析阶段就要确定用来决定这段规则要不要被加载而自定义属性要到计算值阶段才有值。前者早于后者所以拿不到。结论就是断点只能是编译期的常量。想统一管理断点只能靠 Sass 变量、构建工具生成或者干脆约定好写在注释里。我见过有人试图用 JS 读取变量再动态插入媒体查询那条路能走通但成本很高除非真有强需求不建议。6.4 透明度拆分量还是相对颜色语法想对一个主色做各种透明度处理老派做法是把颜色拆成 RGB 分量:root { --brand-rgb: 30 136 229; } .overlay { background: rgb(var(--brand-rgb) / 0.12); }这样做确实方便一处改分量所有透明度都能算。但它的坏处很实在变量名和值对不上直觉改色的人很容易只改了--color-brand忘了同步--brand-rgb结果页面上一半是新色一半是旧色的透明版。我的建议是主色只存一份需要透明时用 color-mix 处理.overlay { background: color-mix(in srgb, var(--color-brand) 12%, transparent); }如果项目必须兼容不支持 color-mix 的环境那就在构建层做一件事写个脚本从--color-brand自动生成--brand-rgb别靠人手动维护两份。6.5 大小写敏感与继承断链自定义属性名是大小写敏感的。--MainColor和--maincolor是两个完全不同的变量。声明一个、引用另一个页面上不会有任何提示就是没效果。团队里统一全小写加连字符能规避掉一大类低级问题。另一类问题是继承断链。因为变量靠继承传递如果引用它的元素不在声明所在元素的子树里就拿不到值。比如变量声明在某个.panel上而弹窗被渲染到了body下面很多弹窗组件的默认行为弹窗里就用不到这些变量。解决办法是把主题变量都放在:root上或者给弹窗所在的容器也声明一份。提示自定义属性有个普通 CSS 选择器不具备的能力——它能穿透 shadow DOM 边界。这正好是 Web Component 换肤的标准做法在宿主元素上设置变量组件内部的样式用 var() 引用。普通选择器做不到这一点必须靠变量。7. 调试与性能DevTools 怎么查、哪里会拖慢7.1 在样式面板里读变量是最快的调试方式我之前介绍过这个方法给同事反馈是早知道能这样我就少加一堆 console.log 了。打开 DevTools 的 Elements 面板选中 html 元素在 Styles 里能看到所有自定义属性的声明。直接双击--color-brand的值改掉页面上所有引用它的地方会实时刷新。调主题配色的时候我基本就是在这个面板里把几个语义色来回拖定下来之后再写回源码。几个细节。Computed 面板里显示的是最终计算值颜色会被规范化成rgb()或oklch()形式别以为是自己写错了。Styles 面板里可以给变量值加勾选框快速开关某条声明这对验证到底是不是这个变量在生效特别有用。还有一点在面板里临时改的值刷新就没了要保留得改源码或者写进元素的 style 属性。7.2 变量改了但页面没变按这个顺序往下查这几年排查同类问题我基本形成了一个固定顺序命中率很高拼写和大小写。变量名用复制粘贴别手打。这是最高频的原因。值是否合法。多余空格、缺单位、颜色写法错误都会导致声明在计算阶段被丢掉而且不报错。选择器是否匹配到。元素是不是在声明所在子树里有没有被更高优先级的声明覆盖Styles 面板里被划横线的那条就是没生效的。属性本身有没有被后面的声明覆盖。变量没问题但color这个属性在下面又被另一条规则改了。是否残留了内联样式上的旧值。之前用 setProperty 写进去的变量留在 style 属性上优先级很高切主题时压住了新值。是否跨了 shadow DOM 或媒体查询边界。媒体查询里用 var() 无效是语法层面的前面讲过shadow DOM 则要靠宿主元素上的变量来穿透。按这个顺序走一遍一般能在两分钟内定位。反过来如果一上来就怀疑浏览器兼容性往往会绕远路——CSS 变量的兼容性其实相当好绝大多数现代浏览器都支持真正的问题几乎都在上面这六条里。7.3 改根变量的代价整棵树重算样式性能这块容易被忽略但项目一大就明显了。变量本身是惰性的声明它不产生任何开销只有被引用时才有意义。但反过来一个变量改变时所有引用它的属性都要重新计算。如果这个变量声明在:root上那所有引用它的元素都会参与这次重算。我遇到过的具体问题是一个列表页有上千个卡片卡片里有一堆用变量驱动的颜色和间距我在动画里逐帧改变量做呼吸灯效果帧率直接掉到三十几。改成用一个伪元素的 opacity 做动画之后稳定在六十帧。几条经验动画优先动transform和opacity别用变量去驱动width、height、padding这类会触发布局的属性。需要频繁改变的变量挂到局部容器上别挂:root。作用范围越小重算范围越小。怀疑有性能问题时用 Performance 面板录一段看 Recalculate Style 的耗时占比比凭感觉猜靠谱。8. 命名、抽象与维护什么不该做成变量8.1 用用途命名不要用外观命名这条规则看起来小但对项目的长期可维护性影响很大。--color-blue是外观命名--color-brand是用途命名。差别在哪换主题时原来那个蓝色可能变成紫色。这时候--color-blue这个名字就变成了谎言而--color-brand依然准确。深色模式更是这样——原本的浅灰背景在深色下变成近黑如果变量叫--light-gray-bg几个月后接手的人会看得一头雾水。我在项目里固定了几组前缀--color-管颜色--space-管间距--radius-管圆角--shadow-管阴影--font-管字体相关--z-管层级。组件级变量加组件名前缀比如--card-padding、--btn-radius。这样一眼就能看出变量属于哪一层、该在哪儿改。8.2 别把变量当万能抽象CSS 变量好用但过度使用会带来另一种维护成本。我见过一个项目把每个间距都做成了变量结果改一个卡片的内边距要在三个文件之间来回跳组件文件引用--card-padding语义层引用--space-3基础层才是8px。追了半天才找到真正要改的那一行。我的判断标准是两条同一个值在两个以上位置出现或者它带着明确的语义主色、圆角、层叠顺序、动画时长才值得抽成变量。只用一次的字面量就直接写在那里读代码的人一眼就能看到实际值体验反而更好。还有一类不适合做成变量的一次性调试值。偶尔为了排查临时写的--debug-outline之类用完记得删别留在产物里。8.3 变量不是类型系统靠约定和检查兜底CSS 变量没有任何类型约束除非用 property 注册你写错一个变量名浏览器只会当作未定义走兜底值或者干脆失效。所以真正防止出错的不是语法而是两件事统一的前缀约定以及一份可查的 token 清单。小团队可以把清单写成注释放在样式文件顶部项目大了就把它抽成一个独立的 tokens 文件谁要加变量先往那儿加避免同一层里出现两个语义重复的变量。这件事听起来不技术但它是这套方案能不能长期用下去的关键。最后分享几个我在实际项目里养成的习惯。开工一个项目的前十分钟我会先把语义层变量列出来哪怕只有十个也先把主色、背景、表面、文字、次要文字、边框这几个定下来后面写组件就顺畅很多。写变量值的时候我给颜色一律加单位无关的裸值、给尺寸一律带单位不给自己留这里到底要不要补 px的犹豫空间。还有一个容易忘的点切到深色模式之后一定要拿 DevTools 的对比度检查过一遍文字和背景——变量方案让换肤变得太容易也容易让人顺手换出一个读不清字的组合这个坑比样式失效更隐蔽因为页面上看不出任何报错。
阅读完成 · 觉得有帮助？
