直接用 setproperty() 更新 css 变量未生效，主因是变量值缺单位或作用域错误：必须带单位赋值（如 '240px'），且确保变量在目标元素作用域内生效；calc() 中变量也须含单位，否则整条声明失效。
直接用 style.setProperty() 更新变量却没生效？检查单位和作用域
变量改了但 DOM 没反应，大概率不是 JS 没执行，而是 CSS 根本没认这个值。浏览器解析 var(--width) 时，如果变量值是 240（无单位），width: 240 是非法声明，整条规则被丢弃。
- ✅ 必须带单位赋值：
el.style.setProperty('--width', '240px') - ✅ 若变量只在局部生效（如某个卡片组件），直接操作该元素：
cardEl.style.setProperty('--shadow', '0 2px 4px rgba(0,0,0,0.1)')，别一股脑往document.documentElement上塞 - ❌ 避免
style="--width: 240"这种写法——缺单位，CSS 层直接忽略 - ⚠️ 注意继承链：若目标元素父级没继承到该变量（比如父级没设
:root或没传入对应类名），var()返回unset，宽高退回到默认值
calc() 和 CSS 变量混用时为什么尺寸突然归零？
calc() 不是魔法函数，它只做一次计算；真正动态的是变量值。但语法容错极低，一个单位错就全挂。
- ✅ 正确组合：
width: calc(var(--base-width) * 0.8)（前提是--base-width是'320px'这种带单位的字符串） - ✅ 灵活加减：
height: calc(var(--base-height) + 2rem - var(--gap))，所有变量都必须含单位 - ❌ 错误写法：
width: calc(100% / var(--col-count))—— 若--col-count是4（无单位），除法非法，整条声明失效 - ⚠️ 乘除限制：允许
2 * 16px，但禁止100px * 20px，后者直接报错不渲染
拖拽缩放组件时 DOM 频繁抖动？别在循环里读写 offsetWidth
编辑器场景下，一边查 offsetWidth 一边设 setProperty()，会触发强制同步布局（forced synchronous layout），卡顿、跳变、掉帧全来。
- ✅ 安全模式：只在
requestAnimationFrame回调里读尺寸、单次更新变量：raf(() => el.style.setProperty('--width', newW + 'px')) - ✅ 防抖更新：拖拽中用
setTimeout节流，松手后再批量更新最终值；中间缩放用transform: scale()模拟，不触发布局 - ❌ 危险操作：循环中交替执行
el.offsetWidth和setProperty()，浏览器反复重排重绘 - ⚠️ 别忽略父容器：若父级是
flex或grid，且子元素同时设了width和flex-basis，变量更新可能被后者覆盖，宽度不变
服务端渲染（SSR）页面里，style="--x: val" 比 JS 注入更快？
静态 HTML 中直接写死变量，省去客户端首次渲染时的 DOM 查询、事件绑定和 style 对象初始化开销，尤其适合首屏关键路径。
- ✅ SSR 场景下，把变量内联进元素：
<div style="--width: 320px; --height: 180px">，比 JS 后续注入更轻量<li>✅ 批量变量用 <code>setAttribute('style', ...)一次性写入，比连续调用setProperty()更少触发重绘 - ⚠️ 注意：
style.cssText是全量替换，会抹掉之前通过element.style.color或其他setProperty()设置的内联样式，容易引发视觉跳变 - ⚠️
getComputedStyle().getPropertyValue()每次调用都强制同步计算，高频场景务必节流或缓存结果
实际项目里最容易被忽略的，是变量作用域和单位绑定的耦合性——变量值不是“数据”，而是“CSS 声明片段”，缺单位就等于语法错误，而作用域断了就等于变量根本不可见。这两点不校验，再漂亮的 JS 逻辑也白搭。
