倒计时数字变化应使用语义化BEM修饰符：--counting、--expiring、--expired、--paused；每位数字独立封装为timer__digit并用--changing等平级修饰符驱动动效，服务端需按剩余秒数预设状态类。
倒计时数字变化该用哪个BEM修饰符
不能用时间值（如 --00:05:32）作修饰符，它不是状态，而是瞬时数值。BEM 修饰符必须可枚举、稳定、语义明确——倒计时的视觉动效只在几个关键节点需要强化：开始、临近结束、归零、暂停。这些才是修饰符该表达的。
常见错误是 JS 每秒拼一个新类名：timer--00:05:31 → timer--00:05:30，结果 CSS 无法预定义、构建工具剔除样式、DevTools class 列表刷屏、动画无法复用。
-
timer--counting：默认态，数字正常更新，可配淡入/滑动过渡 -
timer--expiring：剩余 ≤ 30 秒时添加，触发红底+抖动动画（@keyframes timer-shake） -
timer--expired：归零后切换，禁用交互 + 灰度 + 删除线，不带数字动画 -
timer--paused：手动暂停时使用，冻结数字、停掉所有 animation
数字逐位更新时如何避免重绘抖动
直接改 textContent 会触发整行重排，尤其在移动端容易卡顿。核心是让每位数字独立更新、隔离渲染，同时复用 BEM 结构控制动效节奏。
正确结构应为每位数字封装成 timer__digit，个/十/百位分别加 timer__digit--ones、timer__digit--tens 等修饰符，而非把整个时间串塞进一个 timer__value 元素里。
- 每位数字用
<span class="timer__digit">0</span>包裹，CSS 设display: inline-block; width: 1.2em; text-align: center - 数字变化时，只替换
textContent，不操作 class；动效靠timer__digit--changing临时修饰符驱动 - JS 在更新前加
timer__digit--changing，下一帧（requestAnimationFrame）后移除，触发transform: scaleY(0.8)→scaleY(1)的缩放动画 - 避免对
timer__digit直接设transition: all，只写明确属性：transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1)
动效类名必须和 @keyframes 名称严格一致
timer__digit--changing 这个类名，必须对应同名的 @keyframes timer__digit--changing，不能简写成 @keyframes digit-change 或 @keyframes changing。否则 animation 不会播放，且无法被 PostCSS 插件或 Stylelint 正确识别。
常见错误是动画名和类名错位，比如写了 .timer__digit--changing { animation: digit-fade-in 0.3s; }，但忘了定义 @keyframes digit-fade-in，或者定义了却拼错成 @keyframes digit-fadeIn（驼峰非法）。
- 所有动画名必须全小写 + 连字符，禁止数字开头（
@keyframes 2x-bounce❌）、禁止下划线（@keyframes digit_change❌） - 多个动效叠加时，用逗号分隔：
animation-name: timer__digit--changing, timer__digit--pulse - 若需区分方向（如进/出），用平级修饰符：
timer__digit--entering/timer__digit--leaving，不要写timer__digit--changing-in（修饰符不嵌套）
服务端渲染（SSR）时怎么处理初始倒计时状态
SSR 渲染的 HTML 中，时间已是过去值，timer--counting 类可能一上来就失效。不能依赖 JS 加载后才打补丁，得让初始 HTML 就带对的状态。
做法是：服务端根据当前时间与截止时间计算剩余秒数，再映射到有限状态，输出对应修饰符。例如剩余 27 秒 → 输出 <div class="timer timer--expiring">，而不是硬塞 <code>timer--counting 然后靠客户端 JS 立刻改。
- 状态映射逻辑必须前后端一致（如 ≤ 30 秒为
--expiring，≤ 0 为--expired） - 服务端不传具体时间字符串，只传
remainingSeconds数值，由前端 JS 做精确倒计时，避免时钟漂移 - 初始渲染时，数字 DOM 结构必须完整（含所有
timer__digit元素），哪怕值全是 0，否则 hydration 会失败或触发 layout shift
真正难的不是写动效，是让状态流转和类名更新在毫秒级精度下不脱节——尤其当用户切到后台标签页再切回时，requestAnimationFrame 可能跳帧，得靠时间戳校准，而不是单纯依赖 setInterval。这个细节多数人忽略，直到在 iOS Safari 上发现倒计时“卡两秒”。
