BEM結構反饋

Question

我不確定SO是否是提問的正確位置。如果不是，請告訴我。

我最近在學習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>

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。