可靠，但必须配合 height: calc() 或 transform: scaley()，不能直接写 height: var(--fill-percent)，因 css 变量无单位，height 需 % 或 px；推荐 calc(var(--fill-percent) * 1%)。
用 --fill-percent 控制柱状图高度是否可靠？
可靠，但必须配合 height: calc() 或 transform: scaleY()，不能直接写 height: var(--fill-percent) —— 因为 CSS 变量本身不带单位，而 height 需要 % 或 px。常见错误是漏掉单位拼接，导致样式失效。
推荐用 calc(var(--fill-percent) * 1%)：既保留变量可变性，又确保计算结果带百分比单位。注意 calc() 内部乘法两侧不能有空格（如 var(--p) * 1% 合法，var(--p) * 1 % 会报错）。
-
--fill-percent值应为纯数字（如75），不是75% - 父容器需设
height（如100px或min-height: 2em），否则百分比高度无参照 - 避免在
height上叠加其他百分比类属性（如padding-top: 10%），易引发布局塌陷
如何让多个柱子各自响应不同变量？
每个柱子必须独立作用域：用 :root 定义全局默认值不够，得把变量挂到具体元素上。最直接的方式是内联 style="--fill-percent: 62"，或用 JS 动态 setAttribute。
不要试图用伪元素（如 ::before）继承父级变量再改——它无法覆盖父级同名变量，且无法触发重绘。真需要批量控制，用 data- 属性 + CSS attribute selector 更稳：
div[data-fill="84"] { --fill-percent: 84; }
这样既保持 HTML 可读性，又避免 JS 操作 DOM 样式表的性能开销。
- 变量名建议加前缀（如
--bar-fill），防止和其它组件冲突 - 若用 CSS-in-JS 库（如 Emotion），注意其变量注入时机，可能早于 DOM 渲染，导致首次渲染取不到值
- 服务端渲染时，确保变量值在 HTML 输出阶段已写入，而非依赖客户端 JS 补充
scaleY() 和 height 填充哪个更适合动画？
transform: scaleY(var(--fill-percent) / 100) 更适合动画。因为 transform 是合成层属性，不触发重排（reflow），帧率更稳；而 height 改变会强制浏览器重新计算布局，尤其在 20+ 柱子同时动时容易卡顿。
但要注意：scaleY 默认以元素中心为原点缩放，柱子会向上、向下同时拉伸。解决方法是加 transform-origin: bottom center，让缩放只向上生长。
- 动画起步值建议设为
scaleY(0)，而非scaleY(0.001)，后者在部分 Safari 版本中会跳过首帧 - 若柱子含文字或 border，
scaleY会一并缩放它们——此时需对文字单独设transform: scaleY(1)抵消 - IE 不支持 CSS 变量，
scaleY动画 fallback 方案只能用 JS 控制height+transition
动态更新变量后图表没重绘？检查这三点
变量值变了但柱子不动，大概率是触发条件没满足。CSS 变量更新本身不会强制重绘，必须有依赖它的属性被重新计算。
最常踩的坑是：只改了 document.documentElement.style.setProperty('--fill-percent', '42')，但柱子的 height 或 transform 并未声明依赖该变量（比如写成了固定值 height: 50px）。
- 确认目标元素的 CSS 规则里确实用了
var(--fill-percent)，且拼写完全一致（区分大小写） - 检查是否被更高优先级规则覆盖（如内联
style="height: 30px"会压过 CSS 中的height: calc(var(--p) * 1%)） - 若用 JS 更新，别在
requestAnimationFrame外直接连写两行 setProperty —— 浏览器可能合并渲染，导致中间态丢失
真正难调试的是变量跨 shadow DOM 传递失败，或者被 @layer 隔离了作用域——这种问题往往要靠浏览器 DevTools 的“Computed”面板逐层看 --fill-percent 实际解析值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
