BEM结构反馈

Question

我不确定 SO 是否适合提出此类问题。如果不是这样，请告诉我。

我最近正在学习 BEM CSS 方法，我喜欢它如何解决许多 CSS 问题，例如特异性问题。它使我们的 CSS 更易于维护。

由于我是新手，我很难使用正确的 BEM 类创建正确的 HTML 布局。我使用 BEM 创建了一个模块，并希望专家们根据BEM 的最佳实践就正确的布局提出意见。

这是我尝试使用 BEM CSS 方法的屏幕截图。

这是我到目前为止提出的 HTML 布局，请让我知道实现相同效果的正确方法。

<section class="content">
  <div class="step-nav">
    <div class="step-item">
      <div class="step-item__left">
        <div class="step-item__progress">
          <div>
            <i class="fa fa-lightbulb-o" aria-hidden="true"></i>
            <span>Step 1</span>
          </div>
          <div>100%</div>
        </div>
        <h2 class="step-item__title">General Information</h2>
      </div>
      <div class="step-item__right">
        <i class="fa fa-angle-right" aria-hidden="true">
                <span class="screen-reader-text">Next</span>
              </i>
      </div>
    </div>
    <div class="step-item"></div>
    <div class="step-item"></div>
  </div>
</section>

Answer 1

看起来是正确的，但你应该只有一个 step-nav 块，并且所有后续子组件都是简单的元素，即：

• step-item 应该是 step-nav__item，因为 item 是 step-nav 的一个元素
• step-item__left 应该是 step-nav__item--left，因为 left 是一个修饰符。考虑到这一点，您应该将它们组合起来，以便在同一嵌套级别中使用 <div class="step-nav__item step-nav__item--left">，删除多余的 <div> 嵌套级别

当然，如果你觉得step-nav 太长的话，你可以用step 代替。