直接用 --color-primary 更可靠，因其作为设计令牌的运行时载体，确保全局修改一处即可生效，支持js动态读写，避免硬编码导致的视觉不一致和维护困难。
为什么直接用 --color-primary 比写死 #007bff 更可靠
大型项目里，一个颜色在按钮、边框、图标、禁用态里反复出现，改一次就得全局搜替换，漏掉某处就导致视觉不一致。CSS 变量本质是「设计令牌的运行时载体」，它让修改只发生在一处，且支持 JS 动态读写。
实操建议：
- 所有设计系统定义的颜色、间距、圆角、阴影都必须走
--spacing-md、--radius-sm这类命名，禁止在组件里直接写12px或4px - 变量定义统一收口在
:root或独立的tokens.css文件里，不要分散在各组件中 - 避免用变量套变量（如
--bg-hover: var(--bg-default);），JS 读取时可能返回空字符串——浏览器不会递归解析嵌套var()
如何让 CSS 变量在深嵌套组件中稳定生效
变量继承靠层叠，但遇到 shadow DOM、iframe 或某些框架的 scoped 样式（如 Vue 的 scoped），:root 定义的变量默认进不去。
实操建议：
- 对 Web Components，把变量声明放在
:host或:host-context()内，而不是依赖外部:root - Vue / React 组件中，若用 CSS-in-JS（如 styled-components），变量需显式注入到组件根元素的
style属性里，不能只靠全局:root - 检查 DevTools 的 Computed 面板，看目标元素的
color值是否显示为var(--color-text)而不是已计算值——如果显示的是变量名，说明没被正确解析
var(--size, 16px) 的 fallback 写法有哪些坑
fallback 看似保险，但实际容易掩盖问题：变量名拼错、作用域没覆盖、或变量值本身是空字符串，都会静默回退到 fallback，导致样式“看起来正常”，实则脱离设计系统。
实操建议：
- 仅对真正需要降级的场景用 fallback，比如暗色模式开关未加载完成时的临时值；日常开发中，应让缺失变量报错可见
- 避免 fallback 写成
var(--color-error, red)——red 是语义模糊的硬编码，应换成另一个设计令牌，如var(--color-error, var(--color-danger)) - 构建时可用 PostCSS 插件（如
postcss-custom-properties）开启warnWhenMissing，在编译阶段提示未定义变量
CSS 变量和 JavaScript 交互时最常出错的三件事
JS 读写变量不是黑盒操作，DOM 更新时机、作用域链、单位处理都会导致预期外行为。
实操建议：
- 读取变量用
getComputedStyle(el).getPropertyValue('--color-primary')，别用el.style.getPropertyValue()——后者只读内联样式 - 写入变量时，确保目标元素已挂载，否则
el.style.setProperty('--theme', 'dark')不会触发重绘 - 数值类变量（如
--z-index）在 JS 中写入时别加单位，el.style.setProperty('--z-index', '9999')正确，'9999'错误
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
