Commentaires sur la structure BEM

Question

Je ne suis pas sûr si SO est le bon endroit pour poser une telle question. Faites-moi savoir si ce n'est pas le cas.

J'apprends la méthodologie BEM CSS récemment et j'aime comment il résout beaucoup de problèmes CSS comme les problèmes de spécificité. Cela rend notre CSS plus facile à maintenir.

Comme je suis nouveau à ce sujet, j'ai du mal à créer une mise en page HTML correcte avec la classe BEM appropriée. J'ai créé un module en utilisant BEM et je voudrais que les experts sur l'opinion sur ce qui pourrait être la mise en page correcte selon les meilleures pratiques de BEM.

Voici la capture d'écran de ce que j'essaie d'utiliser la méthodologie CSS BEM.

est ici mise en page HTML que je suis venu avec jusqu'à présent, s'il vous plaît laissez-meknow ce qui serait bon moyen d'atteindre le même.

<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

On dirait au sujet correct, mais vous devriez avoir juste un bloc step-nav, et tous les composants de l'enfant suivants sont simplement des éléments, à savoir:

• step-item devrait vraiment être step-nav__item, puisque item est un élément de step-nav
• step-item__left devrait vraiment être step-nav__item--left puisque left est un modificateur. Avec cela à l'esprit, vous devez les combiner afin que vous utiliserez <div class="step-nav__item step-nav__item--left"> dans le même niveau d'imbrication, la suppression de ce niveau supplémentaire inutile de <div> nicher

Bien sûr, si vous pensez step-nav est trop long d'un mot, vous pouvez utiliser step à la place.