steps 和 step 必须是两个独立 Block，因 step 需跨场景复用（如订单页、表单页、后台卡片），若作为 steps__step 则无法脱离容器存活，违背 BEM“块可独立存在”原则；应使用 is-completed 等 State 类表达动态状态，而非 --completed Modifier。
多步骤引导组件（如注册流程、向导页）必须拆成 steps（容器块）和多个独立的 step（子项块），不能写成 steps__step 这类嵌套元素名——否则它就丧失了复用能力，也违背 BEM 的“块可独立存在”原则。
为什么 steps 和 step 必须是两个 Block，而不是一个 Block 里的元素？
因为 step 在业务中常需单独复用：比如在订单详情页嵌入“已完成”这一步，在表单页只展示“当前步+下一步”，甚至在后台管理中作为状态卡片独立渲染。一旦它只是 steps__step，就无法脱离 steps 容器存活——说明它本该是 Block。
常见错误现象：steps__step--current 看似简洁，但当你要把某个 step 拿去别处用时，CSS 规则全失效；更糟的是，steps__step__icon 这种三级命名直接违反 BEM 扁平化要求。
-
steps只管整体布局：方向（horizontal/vertical）、间距、响应式断点 -
step自含完整逻辑：图标、标题、描述、状态反馈、点击行为 - HTML 中每个
step是独立<div class="step">，不包裹在steps的语义容器内也可渲染
完成态、进行中态该用 --completed 还是 is-completed？
用 is-completed、is-current 这类 State 类，而不是 --completed Modifier。因为“已完成”不是视觉变体，而是跨组件共享的状态语义：订单列表、工单系统、用户路径分析都可能识别这个标记。
立即学习“前端免费学习笔记（深入）”；
Modifier 应保留给真正固定、可控的视觉差异，比如 step--compact（紧凑模式）、step--large（大号图标），它们不会被流程引擎动态注入，也不会被其他模块读取状态值。
- 正确写法：
<div class="step is-current">或<div class="step is-completed"> - 禁止写法：
<div class="step--current">—— 它暗示“当前步”是step的一种变体，而非运行时状态 - State 类可叠加：
class="step is-completed is-optional"，Modifier 不适合表达布尔型业务状态
如何避免 step 内部元素命名冗余？
不要在元素名里重复 Block 名，比如 step__step-icon 或 step__step-title。BEM 要求 Element 名只回答“它是什么”，不回答“它属于谁”——归属已由 Block 名声明。
常见错误是把 HTML 标签名当语义用：step__span、step__div 都不合格；而 step__icon、step__title、step__description 才是语义清晰的写法。
- 图标就是
step__icon，不是step__step-icon（冗余）或step__img（依赖标签） - 状态指示器（如圆点、进度条）应单独成块：
step-indicator，而非step__indicator—— 因为它可能在侧边栏、顶部导航等不同位置复用 - 如果某元素需支持多主题色，用
step__icon--brand而非step__icon-brand，确保修饰符依附于元素且可预测
HTML 中 class 属性怎么写才不破坏 BEM 约束？
每个 DOM 元素只挂一个 BEM 主干类：要么是 Block（step），要么是 Element（step__title），要么是 Modifier 组合（step is-current）。禁用空格分隔的复合类（如 step title）或全局工具类混入（如 step text-center）。
复杂状态组合不靠增加 class 数量，而靠 State 类叠加：class="step is-current is-editable"。这样既保持 HTML 可读性，又让 JS 逻辑能通过 element.classList.contains('is-current') 稳定判断，不依赖顺序或数量。
最容易被忽略的一点：BEM 的约束力不在 CSS 里，而在 HTML 结构本身。一旦允许某个 step__title 同时携带 heading-2 这类通用类，整个命名契约就松动了——后续没人敢删 heading-2，哪怕它和 step 逻辑毫无关系。
