BEM完成态必须用step--completed修饰符，禁用布尔类；样式仅依赖修饰符，不耦合父级/兄弟选择器；JS需统一管理状态，响应式下连接线尺寸由布局块控制。
完成态的 BEM 类名必须带 --completed 修饰符
直接加 is-completed 或 active 这类布尔类名，会破坏 BEM 的语义隔离原则。BEM 要求状态变化通过明确的修饰符表达，而不是靠“存在即生效”的布尔类。所以完成态必须用 step--completed 这种结构，不能写成 step is-completed。
常见错误是把完成态写成独立组件类，比如 step-completed —— 这违反了 BEM 的“同一块 UI 只有一个根类名”原则，step-completed 和 step 在语义上不是平行关系，而是修饰关系。
-
step--completed是唯一合规写法（对应 HTML：class="step step--completed"） - 若需区分“当前进行中”和“已完成”，应分别用
step--current和step--completed，二者互斥，不叠加 - 不要在 JS 中 toggle
is-completed类——改用element.classList.toggle('step--completed')
完成态样式必须只依赖修饰符类，不耦合父级或兄弟选择器
BEM 的核心约束之一是避免嵌套过深。完成态样式如果写成 .steps .step--completed .step__label，就引入了父容器强依赖；更糟的是写成 .step--completed + .step 这类兄弟选择器——这会让组件无法单独复用，也违背“块内元素样式仅由块自身控制”的原则。
正确做法是所有完成态视觉反馈（如图标变实心、文字加粗、连接线着色）都通过 step--completed 修饰符直接作用于其子元素：
.step--completed .step__icon {
background-color: #1890ff;
}
.step--completed .step__label {
font-weight: 600;
}
.step--completed .step__line {
background-color: #1890ff;
}
- 禁止出现
.steps--vertical .step--completed这类组合修饰符（垂直/水平布局应由steps--vertical单独控制） - 连接线（
step__line）是否显示、颜色如何，必须由step--completed或step--current控制，而非靠 JS 动态插入新 class - 图标状态切换优先用伪元素（
::before）配合content切换，而不是替换 DOM 节点
JS 更新完成态时，必须同步清理冗余状态类
分步骤条常有“回退”操作，比如从第 4 步退回第 2 步。此时第 3、4 步的 step--completed 必须被移除，但开发者容易只处理当前步，漏掉后续步骤。
更隐蔽的问题是：有些实现用 step--finished 表示“流程结束”，和 step--completed 混用，导致 CSS 规则冲突或状态不可预测。
- 完成态更新逻辑应统一走一个函数，例如
updateStepStatus(currentIndex)，内部遍历所有step元素，按索引设置step--completed或清除 - 禁止给第 n 步同时加
step--completed和step--current—— 完成态和当前态是互斥的视觉状态 - 若后端返回的完成状态是数组（如
[1, 2, 4]），JS 应转换为“小于等于最大完成索引的所有步骤设为 completed”，而不是逐个匹配——否则步骤跳过时（如只完成 1 和 4）会导致视觉断连
响应式下完成态的连接线渲染容易出错
横向步骤条在移动端常转为纵向，此时 step__line 的方向、长度、定位方式全变。如果完成态样式里写了 height: 2px 或 width: 100% 这类固定值，就会在纵向模式下失效。
真正健壮的做法是：连接线的尺寸和方向由布局块（steps--vertical / steps--horizontal）控制，完成态修饰符只负责颜色、可见性等状态属性。
-
.steps--vertical .step__line应设width: 2px; height: auto;，而.steps--horizontal .step__line设height: 2px; width: auto; -
.step--completed .step__line只管background-color和opacity，不碰尺寸 - 避免用
transform: rotate()实现竖向线——旋转后坐标系混乱，hover 区域和动画易错位
BEM 完成态最常被忽略的点是：它不是“加个 class 让样式变一下”这么简单，而是整套命名、样式作用域、JS 状态管理的协同约定。一旦某个环节松动（比如 JS 乱加类、CSS 用兄弟选择器），整个步骤条在嵌套或复用时就会开始漏样式、错状态。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
