用纯html+css可复用状态追踪条：以语义化步骤，加step--done等状态类，::before生成图标，::after画连接线，css变量统一配色，禁用pointer-events防误点，确保ssr首屏正确、无障碍支持aria-current。
怎么用纯 HTML + CSS 实现可复用的状态追踪条
不用 JS 就能渲染出带状态标记、连接线和文字说明的订单进度条，关键在语义化结构 + 灵活的伪元素控制。HTML 本身不提供“进度条组件”，但 <ol></ol> 或 <ul></ul> 配合 CSS 可以精准表达步骤顺序和当前状态。
实操建议：
- 用
<ol></ol>包裹步骤项，天然支持序号语义，也方便后续用 CSS 控制激活态（比如第 3 步高亮） - 每个步骤用
<li>，内部嵌套<span class="status-label"></span>和<span class="status-desc"></span>，避免用<div> 破坏列表流式布局<li>连接线不要用图片或额外标签，用 <code>::after在非末尾项上画一条横线，宽度设为calc(100% - 1.5em)避免覆盖文字 - 状态图标（如 ✔️、⏳、?）统一用
::before生成，配合content和font-size控制大小，比插入 Unicode 字符更可控 - 用
color+border-color+background-color三者组合区分状态，别只调一个属性 - “进行中”项的圆点建议加
box-shadow: 0 0 0 3px var(--accent-color)做外发光，比单纯放大更醒目 - 对“未开始”状态，用
pointer-events: none防止误点，同时加cursor: default - 所有颜色值用 CSS 自定义属性（如
--status-done），方便电商多主题切换 - 如果项目已用 Bootstrap，优先覆盖其 CSS，而不是嵌套使用；例如重置
.progress的 display 和 height，再用自定义类接管 - 移动端断点要单独处理连接线方向：竖排时用
::before画竖线，横排时用::after画横线，别共用同一套伪元素逻辑 - 约定 status 值只能是
'pending'/'active'/'done'/'error'四种，对应 classstep--pending等，不扩展 - React 中用
aria-current="step"标记当前项，Vue 模板里用:attr="{ 'aria-current': step.status === 'active' ? 'step' : null }" - 服务端渲染（SSR）时确保初始 HTML 已含正确 class，别等 JS 加载后再 patch，否则首屏会闪动或被爬虫忽略状态
- 如果后端返回的是中文状态（如
"已签收"），前端必须映射为标准英文 key，CSS 才能稳定匹配
CSS 怎么让“已完成”“进行中”“未开始”视觉区分明显
靠 class 切换状态比写三套独立样式更可靠，关键是把“状态”作为修饰类加在 <li> 上，比如 class="step step--done"，而不是靠 JS 动态改 style 属性。
常见错误现象：用 opacity: 0.5 表示未开始，结果屏幕阅读器仍会朗读；或给“进行中”加动画但没限制重绘区域，导致整条追踪条闪烁。
立即学习“前端免费学习笔记（深入）”；
实操建议：
为什么不能直接用 Bootstrap 的 progress 组件做订单追踪
Bootstrap 的 .progress 是为百分比加载设计的，它假设状态是连续、可量化的，而订单状态是离散的（“已发货”跳不到“73%”）。硬套会导致语义错误、无障碍问题和样式冲突。
使用场景差异明显：订单追踪需要点击跳转详情页、支持屏幕阅读器识别“第2步：已支付”，而 <div class="progress"> 只告诉用户“还剩多少没完成”。<p>实操建议：</p>
<ul><li>别把 <code><div class="progress-bar"> 塞进 <code><li> 里——它没有语义，AT（辅助技术）无法关联步骤名
怎么让状态条在 Vue/React 项目里不重复写 HTML 结构
核心不是“封装成组件”，而是把数据结构定死，让模板只负责映射。HTML 本身不关心框架，但框架渲染时容易忽略语义完整性。
参数差异直接影响可访问性：比如传入 steps = [{label: '下单', status: 'done'}, ...] 很自然，但如果 status 值用布尔（isCurrent）、数字（index === 2）或字符串（'shipped'）混用，CSS 类名就难统一。
实操建议：
最易被忽略的是焦点管理：用户用键盘 Tab 切换时，应该能进入每一步并触发详情展开，但很多实现只加了 tabindex="0" 却没配 role="button" 和 aria-expanded，导致屏幕阅读器念不出“已发货，可点击查看详情”。
