BEM命名の概念に従ってhtmlをフォーマットするにはどうすればよいですか？

Question

私はプロジェクトにBEM命名を適用する私のアプローチであるfooliwngコードを持っています。しかし、私は何かが間違っていると思います。なぜなら、BEMはelemntsの要素は存在してはならないと述べているからです。どのように名前を付けますか？いないすべての要素が同じタイプであるが、すべての項目要素であり、私はそれが自分のクラスの名前から明らかであるべきだと思うbecuz私は別のクラスのprofile__item__el」を使用してはならないことを私は見

<div class="container"> 
<div class="profile"> 
    <p class="profile__message></p> 
    <div class="profile__item"> 
    <div class="profile__item__el profile__item__el-image"> 
     <a class="thumb"><img></a> 
     <div class="profile__item__el-remove"></div> 
    </div> 
    <span class="profile__item__el profile__item__el-name"></span> 
    <span class="profile__item__el profile__item__el-author"></span> 
    <span class="profile__item__el profile__item__el-date"></span> 
    <div class="profile__item__el-favorite"></div> 
    </div> 
</div> 
</div> 

、しかし、BEMによると正しいとは思われません。

Answer 1

私は、私はおそらくこの方向に多くを行くだろうと思いますが、でもこれは本当に完璧ではありません。

<div class="container"> 
    <div class="profile"> 
     <p class="profile__message></p> 
     <div class="profile__item"> 
     <div class="profile__attribute profile__image"> 
      <a class="thumb"><img></a> 
      <div class="action--remove"></div> 
     </div> 
     <span class="profile__attribute profile__name"></span> 
     <span class="profile__attribute profile__author"></span> 
     <span class="profile__attribute profile__date"></span> 
     <div class="action--favorite"></div> 
     </div> 
    </div> 
</div> 

「profile__attribute」クラスの必要性は疑問です。これらのさまざまな属性すべてにスタイルを適用する場合は、本当に必要なだけです。

あなたはBEMの「修飾子」部分の目的を誤解していると思います。まず、ハイフンを1つだけ使用しましたが、2つにする必要があります。第2に、モディファイアは同じ要素の異なるバリアントに対して多くのことを意味します。たとえば、ボタン要素と大きくて小さなバリアントがある場合は、 - 大とボタン - 小さい。名前、作者、日付はすべて別々の要素であり、同じ要素の異なるバージョンではありません。

これはすべて、私は確かにBEMの正当な権利と間違いがあるとは確信していません。その多くは人とコーディングスタイルガイドの種類によって異なります。

Answer 2

短い答え。追加のクラスなし -

内のすべてのブロックのみ要素または別のブロック

を持っているので、すべての要素がブロックname__elem名ようなクラスを持っています。

すべてのブロックセット名前空間。

BEM use修飾子のブロック要素の外観を変更するには、次のように入力します。

はどのように動作します：HTML + CSS - BEMはまた、独自のテンプレートエンジンと技術の積み重ねがある

---

下記を参照してください。 普通のHTMLを書く必要はありません。自動的にコンパイルされます。それは（bemjson）のように見える方法

：

{ 
    block : 'row', 
    content : [ 
     { 
      elem : 'col', 
      mods : { sw : 4, mw : 2, lw : 2, xlw : 2 }, 
      content : [ 
       { 
        block : 'footer', // it's determine parent of element 
        elem : 'age', // but it's element 
        content : [ 
         { 
          block : 'icon', 
          mods : { type : 'some-icon' } 
         } 
        ] 
       }, 
      ] 
     }, 
    ] 
} 

あなたがバンドル（HTML）で出力するHTMLを見ることができます：

：

<div class="row"> // block-namespace 
    <div class="row__col row__col_sw_4 row__col_mw_2 row__col_lw_2 row__col_xlw_2"> //elem row__col, then modifiers 
    <div class="footer__age"> // element age with forced block footer 
     <i class="icon icon_type_some-icon"> 
     <svg></svg> 
     </i> 
    </div> 
</div> 

CSSは、この（2つのLVLにおける基本的要素）のように見えます

.row // namespace 
{ 
    margin: 0 -7px; 

    &__col // element 
    { 
     padding: 0 7px; 
    } 
    &__col_p_0 // element with modifier 
    { 
     padding: 0px; 
    } 
} 

公式サイトのドキュメント： https://en.bem.info/methodology/naming-convention/