必须挂在 Block（.step）上，如.step--current、.step--completed；不可写成.step__item--current，因“当前步”是流程级状态，依赖外部数据流且会动态迁移，语义归属必须与 Block 一致。
步骤条（Step）组件的 BEM 状态必须能明确区分「当前步」「已完成」「未开始」「错误态」四类视觉与语义状态，且 Modifier 不得越界修饰 Element。
step--current、step--completed 这类修饰符该挂在哪一级？
必须挂在 Block（.step）上，不能写成 .step__item--current。因为「当前步」是整个步骤流程的状态，不是某个 item 自身的固有属性——它依赖于外部数据流（如 activeIndex），且会动态迁移。同理，.step--error 表示整个步骤流程被阻断，不是某一项出错。
-
.step--current控制高亮边框、进度线终点、文字加粗等全局表现 -
.step__item--current是错误写法：它把流程状态降级为单个节点样式，破坏了状态归属的语义一致性 - 若需强调某 item 内部图标变化（比如对勾变感叹号），应通过
.step__item-icon--error实现，但前提是该 icon 是独立可复用的 Element
如何避免 .step__item--active 和 .step--current 语义重叠？
删掉 .step__item--active。BEM 中不允许存在和 Block 级 Modifier 含义重复的 Element 级 Modifier。「激活」是流程控制态，只属于 .step；.step__item 只负责表达自身结构角色（如 .step__item--numbered 表示带数字编号，.step__item--icon-only 表示仅图标无文字）。
- 常见错误：
.step__item--active+.step--current同时存在，导致样式层叠混乱、JS 判断逻辑冗余 - 正确做法：JS 只切换
.step的 Modifier，所有 item 的样式响应由 Block 级规则驱动，例如：.step--current .step__item:nth-child(2) { ... } - 如果设计稿要求「当前步 item 文字变色，其余 item 灰阶」，应写成
.step--current .step__item和.step--current .step__item:not(:nth-child(2))，而非靠多个 Modifier 堆砌
错误态（error）需要单独 Block 吗？
不需要新建 Block，但必须拆出独立的 .step-error-message。步骤条的 error 不是视觉变体，而是补充信息载体——它可能包含文案、重试按钮、链接等交互元素，具备完整业务语义和复用价值。
-
.step--error仅用于触发容器位移、增加底部间距、弱化非错误区域等布局影响 -
.step-error-message是另一个 Block，和.step并列，通过 DOM 邻接或 JS 插入控制显隐 - 禁止写
.step__error-text或.step__item--error：错误提示不属于步骤条内部结构，强行嵌套会导致无法在弹窗、表单页等不同上下文中复用
最易被忽略的是「当前步」和「已完成」的边界处理：当用户回退到上一步时，原 .step--current 要立刻移除，同时确保 .step--completed 已提前存在于所有历史步——这个状态同步必须由组件外逻辑保证，BEM 类名本身不携带状态持久性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
