BEM结构反馈

我不确定SO是否是提问的正确位置。如果不是，请告诉我。BEM结构反馈

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

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

这里是我试图使用BEM CSS方法的截图。

这里是HTML的布局，我想出来的，到目前为止，请让meknow会是什么来达到同样的正确途径。

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

来源

2017-08-25 vikrantnegi007

我投票结束该题目作为题目，因为它属于codereview.stackexchange.com – Alohci

@Alohci此问题不适用于Code Review，因为它不包含*完整工作代码*正在寻求。 –

看起来大约是正确的，但你应该有只是一个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。

来源

2017-08-25 12:02:28 Terry

谢谢。但是'step-item__progress'标签的内部呢。 – vikrantnegi007

BEM结构反馈

回答

相关问题