css变量在媒体查询中修改不提升性能，而是降低维护成本；只需更新变量值，所有引用处自动响应，避免重复书写样式规则和遗漏风险。
在媒体查询中修改 CSS 变量本身并不“更高效”，真正高效的是它帮你避免了重复写样式规则——变量改一次，所有引用它的属性自动响应，不用为每个断点重写 font-size、padding、grid-template-columns 等十几条声明。
为什么@media里改--gap比重写.card padding更省事
你不是在“优化性能”，而是在减少维护成本和出错概率。重写样式要复制粘贴整块规则，漏改一条就导致断点错位；改变量只需更新值，且所有用 var(--gap) 的地方立刻生效。
- 常见错误：在
@media (min-width: 768px)里写.card { padding: 1rem; }，结果忘了同步改.header和.sidebar—— 改变量则不存在这种遗漏 - 变量必须定义在
:root，否则媒体查询里:root { --gap: 1rem; }不会覆盖局部选择器下的同名变量 - 如果某处写了
padding: 16px !important，var(--gap)就会被无视，优先级检查比重写样式更隐蔽
为什么连续改多个变量不会触发多次重排
setProperty() 是惰性更新，浏览器只标记“这个元素的自定义属性变了”，不立即走样式计算流程。只有当后续发生 scroll、resize 或读取 getComputedStyle() 时，才批量展开所有 var(--x) 并统一计算。
- 对比：连续执行
el.style.padding = '1rem'; el.style.margin = '0.5rem';→ 两次内联样式字符串解析 + 合并计算 - 而
el.style.setProperty('--pad', '1rem'); el.style.setProperty('--mar', '0.5rem');→ 两次键值对更新，无解析开销 - 注意：
document.documentElement.style.setProperty()在全局变量场景下才适用；若变量只用于某个卡片组件，直接操作cardEl.style.setProperty()更精准，避免全页面样式重算
为什么 calc() 配合变量在媒体查询里容易失效
calc(1rem * var(--scale)) 这类写法看似灵活，但单位混用会静默失败：如果 --scale 定义为 --scale: 1.2（无单位），乘法合法；但若误写成 --scale: 1.2px，整个 calc() 表达式就会被浏览器丢弃，回退到初始值。
- 常见错误：在
:root里定义--breakpoint-md: 768px，然后试图在@media (min-width: var(--breakpoint-md))中使用 → 语法非法，CSS 不支持变量用于媒体查询条件 -
calc()应统一放在:root或组件级样式中，媒体查询只负责改变量值，不参与计算逻辑 - 单位缺失是高频坑：写
--font-size: 16而非--font-size: 16px，var(--font-size)引用时会失效，且 DevTools 不报错
真正容易被忽略的是：变量本身不触发重排重绘，但一旦它被用于 width、height、font-size 这类影响布局的属性，浏览器就必须做 layout 计算——性能收益瞬间归零。所以高效的前提，是你清楚哪些属性能“安全”地绑定变量。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
