CSS变量性能优于直接改style属性，因其惰性求值、避免内联样式解析开销、支持层叠与动画解耦；而element.style.color会立即触发重排、破坏CSS作用域且无法被calc()或transition感知。
因为CSS变量能触发浏览器原生的样式重计算与重绘，而JS直接改style属性会破坏层叠、绕过CSS作用域、无法被calc()或transition感知，且难以复用和维护。
为什么element.style.color = 'red'不如setProperty('--color', 'red')
直接操作style属性把样式“钉死”在元素上，覆盖了所有外部CSS规则（包括:hover、@media、scoped注入的选择器），且该值无法被其他元素继承或复用；而setProperty('--color', 'red')只是更新一个自定义属性，后续所有var(--color)引用都会响应式更新，包括子组件、伪元素、动画关键帧。
- 常见错误现象：给按钮加
:hover { background-color: var(--bg); }，但用btn.style.backgroundColor = '#ff0000'后，悬停时颜色不变——因为style优先级高于:hover规则，且var(--bg)根本没被触发 - Vue组件中若用
:style="{ color: textColor }"，该绑定只作用于当前元素，无法让子组件里的var(--text)同步变化 -
transition: background-color 0.3s对style.backgroundColor有效，但对var(--bg)无效——除非你把transition写在使用var()的规则上，比如.btn { background-color: var(--bg); transition: background-color 0.3s; }
为什么var(--size)能进calc()而JS拼字符串不能
CSS变量本质是字符串，但浏览器在解析calc(var(--size) * 2)时，会在计算阶段将var(--size)内联展开为真实值再运算；JS拼接style.width = size * 2 + 'px'则完全脱离CSS层叠系统，无法响应父级缩放、em上下文、媒体查询等动态条件。
- 错误写法：
width: var(--size) * 2→ 整条声明被浏览器忽略 - 正确写法：
width: calc(var(--size) * 2)→ 支持单位混合（如var(--gap) + 1rem） - JS无法等价实现
font-size: clamp(1rem, 2.5vw, 1.5rem)中的响应式逻辑，但clamp(var(--min), var(--ideal), var(--max))可以
为什么Vue 3的<style vars></style>实验性语法依赖CSS变量
Vue 3单文件组件的<style vars="primaryColor"></style>语法，底层就是把primaryColor自动注入为style="--primary-color: {{ primaryColor }}"，再由CSS通过var(--primary-color)消费——这要求变量必须是CSS原生可读写的，Sass变量或JS局部变量都无法参与这个链路。
- 如果你在
<script setup></script>里定义const theme = ref('dark')，然后想让.card根据它切换圆角，就得靠:style="{ '--radius': theme.value === 'dark' ? '12px' : '4px' }"，而非在<style scoped></style>里写@if（Sass不支持运行时分支） - Scoped样式中
:root { --color: red }会失效，因为scoped会给:root加上属性选择器（如:root[data-v-xxx]），破坏其全局性；必须写在非scoped的全局CSS中 - 组件库主题覆盖（如
--el-color-primary）只接受CSS变量注入，JS改style属性对第三方组件无效
真正容易被忽略的是：CSS变量不是“更方便的JS样式绑定”，而是浏览器渲染管线中唯一能被样式引擎、布局引擎、合成引擎共同识别的动态信号。一旦你开始依赖过渡、动画、媒体查询或组件化主题，绕开它就等于放弃浏览器原生能力。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
