步进器按钮禁用状态必须用CSS变量动态控制，如--can-decrease、--can-increase，由JS实时更新，并通过calc()实现渐变透明、光标及滤镜响应，避免静态opacity或pointer-events:none。
步进器按钮禁用状态必须用CSS变量动态控制
直接写 opacity: 0.5 或 pointer-events: none 是静态的，无法响应 value 变化。真正起作用的是把边界判断逻辑交给 CSS 变量，再让样式读取它。
比如在容器上设置：:root { --can-decrease: 1; --can-increase: 1; }
然后 JS 根据当前值实时更新：el.style.setProperty('--can-decrease', value > min ? '1' : '0');
- 禁用减号时：用
opacity: calc(var(--can-decrease) * 0.8 + 0.2)实现渐变透明（0→0.2，1→1） - 禁用加号时：同理用
--can-increase控制cursor和filter: grayscale() - 别用
display: none—— 它会破坏 layout flow，导致按钮位置跳动
数值显示区域要响应式适配字体大小和宽度
单纯写 font-size: 16px 在不同步长或位数下容易溢出。得靠 CSS 变量联动 calc() 动态缩放。
示例：.stepper-value { font-size: clamp(14px, calc(1rem + var(--value-digits) * 0.1rem), 20px); }
其中 --value-digits 由 JS 计算当前数字位数后注入（如 9→1，100→3）
- 位数少时用大字号保证可读性，位数多时自动缩小防溢出
- 避免用
vw单位——它随视口变化，但步进器宽度是固定的 - 如果用了单位后缀（如
kg），记得在 JS 中同步更新--unit-width变量，用于min-width计算
点击反馈动画不能只靠 transition 硬切
用户点按按钮时，需要视觉“压下”感。纯 transition: transform 0.1s 太生硬，得结合 CSS 变量模拟状态机。
关键做法：.stepper-btn:active { transform: scale(calc(1 - var(--is-pressed, 0) * 0.1)); }
JS 在 touchstart/mousedown 时设 --is-pressed: 1，touchend/mouseup 时设回 0
- 不推荐用
:active伪类单独控制——它在移动端触发不稳定，且无法跨元素共享状态 - 别在 transition 中写多个属性（如
transform opacity），容易因渲染管线不同步导致卡顿 - 如果按钮有边框，记得同步改
border-color：用var(--btn-border, #ccc)配合 JS 切换主题色
主题色与步长耦合时变量命名必须带语义
当步进器支持“小步微调”和“大步跳跃”两种模式时，光用 --primary-color 不够——颜色要随步长语义变化。
立即学习“前端免费学习笔记（深入）”；
正确方式：.stepper[data-step="1"] { --btn-color: #3498db; }.stepper[data-step="10"] { --btn-color: #e74c3c; }
然后所有按钮都用 background-color: var(--btn-color);
- 不要把步长值直接塞进变量名里（如
--color-step-10），维护成本高 - 避免用 JS 拼接 class 名来切换主题——CSS 变量可以批量响应，class 切换会触发重排
- 如果支持深色模式，
@media (prefers-color-scheme: dark)里重定义--btn-color即可，不用额外 JS
实际最难的部分不是写变量，而是决定哪些状态该暴露给 CSS、哪些必须留在 JS 里。比如“是否正在动画中”这种瞬时状态，用变量传递反而增加同步负担；而“当前是否可操作”“步长类型”“位数”这类稳定特征，才是 CSS 变量最该承接的。
