BEM结构反馈

Question

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

我最近正在学习BEM CSS方法，我喜欢它解决许多CSS问题的方式，比如专用性问题。它使我们的CSS更易维护。

因为我是新手，我很难用合适的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的一个元素应该真的是left，因为left是修饰符。考虑到这一点，您应该将它们组合在一起，以便在同一嵌套级别中使用<div class="step-nav__item step-nav__item--left">，从而删除<div>嵌套

中不必要的额外级别

当然，如果你觉得step-nav这个词太长，你可以用step代替。