BEM構造フィードバック

Question

SOがそのような質問をする正しい場所であるかどうかはわかりません。そうでない場合は教えてください。

私は最近、BEM CSSの方法論を学んでいます。私はそれが特異性の問題のようなCSSの問題の多くをどのように解決するのか好きです。それは私たちのCSSをより保守しやすくします。

私は新しく、適切なBEMクラスの正しいHTMLレイアウトを作成するのに苦労しています。私はBEMを使用してモジュールを作成し、ベストプラクティスBEMに従って正しいレイアウトになる可能性について専門家に意見を求めています。

ここでは、私がBEM CSS手法を使用しようとしているもののスクリーンショットを示します。ここで

は、私は、同じことを達成するための正しい方法であるものmeknowを聞かせてください、これまでに作ってみた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-nav__item--leftになります。このことを念頭に置いて、あなたが<div>の余分な不必要なレベルはもちろん

を入れ子にすることを取り除く、同じ入れ子レベルで<div class="step-nav__item step-nav__item--left">を使用するように、あなたがそれらを結合する必要があり、あなたが考える場合step-navは、単語の長すぎます代わりにstepを使用できます。