html - BEM结构反馈

Question

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

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

因为我是新手，我很难用适当的 BEM 创建正确的 HTML 布局类(class)。我已经使用 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 block ，所有后续的子组件都是简单的元素，即:

• 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相反。