步骤条应拆为两个独立 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"> <h3>如何避免 step 内部元素命名冗余？</h3> <p>常见错误是写成 <code>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 上，否则换肤或主题切换时会失控。 -
