css变量需配合calc()将数值转为width，且必须归一化到0–100区间并设max-width: 100%防溢出；--max-value须由js/后端注入，边界值需js预处理，伪类无法修改css变量。
CSS变量不能直接把数值“映射”成width，必须靠calc()显式运算，且单位、范围、基准全得手动对齐——否则width: calc(var(--value) * 1%)可能渲染出0px或溢出容器。
为什么width: calc(var(--value) * 1%)经常失效
这个写法看似简洁，但隐含三个硬性前提：数值在0–100之间、父容器宽度固定、所有条共享同一百分比基准。现实中容易踩坑：
- 若
--value是原始数据（比如销售额12800），12800 * 1%=128px，和“占父容器12.8%”完全不是一回事 - 父容器用
max-width: 600px但没设width，子元素width: 80%会按 viewport 宽度算，而非你预期的600px - IE11 和 Safari 14 及更早版本不支持
calc()里带变量的除法，calc(var(--value) / var(--max) * 100%)直接退化为auto
正确做法：用--max做归一化，再套calc()
真正可控的方式，是把原始值缩放到0–100区间，再转为百分比。关键在根节点声明最大值，并确保每个条形都继承它：
:root {
--max-value: 250; /* 全局最大值，需由JS或后端注入 */
}
<p>.bar {
--value: 187; /<em> 当前条形原始值 </em>/
width: calc((var(--value) / var(--max-value)) <em> 100%);
max-width: 100%; /</em> 防止--value > --max-value时撑破容器 */
box-sizing: border-box;
}
</p>
- 必须写
max-width: 100%，否则--value超限会导致条形突破父容器 -
box-sizing: border-box要加在.bar上，避免padding干扰width计算 - 如果数据含小数（如
--value: 187.3），Safari 15.4以下会截断为187，可补transform: scaleX(1)强制重绘
JS注入变量时，别直接改style.width
用element.style.setProperty()更新CSS变量，比直接操作style.width更利于维护和动画：
const bar = document.querySelector('.bar');
bar.style.setProperty('--value', '192');
// 触发 transition: width 0.3s
- 避免批量调用
setProperty造成重排，100+条形建议用document.documentElement.style.setProperty()统一更新--max-value，再让各条形用自身--value独立计算 - 不要在
:hover里写--value: 95——伪类无法修改自定义属性值，那行代码无效 - 过渡动画只对
width生效，background-color或height要单独加transition
负数、零值、空数据怎么处理
CSS本身不判断数值逻辑，这些边界情况必须由JS预处理或CSS兜底：
-
--value: 0→ 条形高度/宽度为0，视觉消失；想留个细线提示，就设min-width: 2px或border-left: 2px solid #ccc -
--value为负数 →calc()结果为负，浏览器会按0px渲染；JS层应提前过滤或转为绝对值+特殊class标识方向 - 数据为空或
NaN→ CSS变量默认值机制不可靠（var(--value, 0)只在变量未声明时生效），务必由JS保证setProperty传入有效数字
真正卡住的往往不是calc()怎么写，而是谁来确定--max-value、谁来校验--value是否合法、以及当API返回空数组时，整个.bar-chart容器要不要显示“暂无数据”提示——这些都不在CSS职责范围内，但缺一不可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
