步骤条应拆为两个独立 Block：steps（容器）和 step（可复用子项），其中 step 自含状态、图标、标题等完整逻辑，命名遵循 BEM 规范，避免冗余；状态使用 is-current、is-completed 等语义化 State 类，Modifier 仅用于固定视觉变体如 step--large。
步骤条组件该拆成几个 Block？
步骤条（step bar）不是单个 Block，而是由 steps（容器块） + 多个 step（子项块）构成的组合。强行把整个步骤条写成 steps__item--active 会违反 BEM 原则：一旦某个 step 需要单独复用（比如在表单页嵌入单步确认），它就无法脱离父容器独立存在——说明它本该是独立 Block。
正确拆分方式：
-
steps：仅负责布局、间距、整体方向（horizontal/vertical） -
step：每个步骤自身逻辑完整，含图标、标题、描述、状态反馈 - 不设
steps__step这类嵌套元素名，因为step已具备复用性
完成态和进行中态该用 Modifier 还是 State？
用 --completed 和 --current 这类 Modifier 是常见错误。它们本质是临时视觉变体，但实际业务中，“已完成”可能跨组件复用（如订单列表也标“已完成”），而 “进行中” 可能被流程引擎动态注入 —— 这类需全局识别的状态，更适合用语义化 State 类。
推荐方案：
立即学习“前端免费学习笔记（深入）”；
- Modifier 保留给固定、可控的视觉变体：
step--large、step--compact - 状态统一用
is-completed、is-current（带is-前缀），与 Block 解耦 - HTML 中同时携带 Block 名和 State 类：
<div class="step is-current">
如何避免 step 内部元素命名冗余？
常见错误是写成 step__step-icon 或 step__step-title —— 元素名里重复了 Block 名，属于典型冗余。BEM 要求 Element 名只表达“它是什么”，不重复上下文。
正确命名规则：
-
step__icon（不是step__step-icon） -
step__title（不是step__step-title） -
step__description（清晰表达用途即可） - 如果某元素需区分类型（如图标有 status/icon/loading），用 Modifier：
step__icon--status
SCSS 中怎么安全实现状态样式隔离？
直接写 .step.is-current .step__icon 会生成后代选择器，破坏 BEM 的样式作用域隔离。SCSS 必须严格用 &__ 和 &-- 语法，且禁止空格。
正确写法示例：
.step {
&__icon {
transition: transform 0.2s;
}
&.is-current &__icon {
transform: scale(1.2);
}
&.is-completed &__icon {
color: #4caf50;
}
}
注意：&.is-current &__icon 编译后是 .step.is-current .step__icon，虽含空格，但它是显式声明的父子关系，且依赖 Block 类存在，不破坏模块边界；而 .step__content .step__icon 这类隐式嵌套才是必须禁止的。
真正容易被忽略的是：State 类（如 is-current）不该在 SCSS 里定义颜色/尺寸等具体样式，只应作为钩子；所有视觉表现必须绑定到 Block 或 Element 上，否则换肤或主题切换时会失控。
