BEM结构反馈

Question

我不确定SO是否是提出此类问题的正确位置。如果不是这样，请告诉我。

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

正如我刚接触到的那样，我很难用正确的BEM课程创建正确的HTML布局。我已经使用BEM创建了一个模块，并希望根据BEM的最佳实践，就可能是正确的布局的专家发表意见。

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

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

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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。