bem内のブロックを含むことができる要素

Question

以下のようにコードを書くのが間違っていると言われました。私は要素がブロックとその悪いb.m.mを含むことができないと思います。

<ul class="b-nav"> 

    <li class="b-nav__item"> 

     <a href="#" class="b-nav__item__link"> Item </a> 


    </li> 

</ul> 

私はこのように書くことを考えましたが、階層も表示されません。

<ul class="b-nav"> 

    <li class="b-nav__item"> 

     <a href="#" class="b-nav__link"> Item </a> 


    </li> 

</ul> 

これは別の方法ですが、私には上記の例よりも悪いようです。

<ul class="b-nav"> 

    <li class="b-nav__item"> 

     <a href="#" class="b-link"> Item </a> 


    </li> 

</ul> 

私はもともとそれを間違ってコード化しましたか？もしそうならば、そして何が最良の選択肢なのか。

Answer 1

リンクがアイテムに属する場合でも、nav_ という名前のリンクはnav _item__linkよりも受け入れられると思います。私がしていたことは、おそらくその階層を示すために過度のものでした。結局、どちらも同じブロックに属しています。

私は

あなたが第二または第三のサンプルを使用する必要があります

https://github.com/csswizardry/inuit.css/issues/155

http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/

Answer 2

下の各リンクのコメントでいくつかの例を見ました。

またはこれを使用することもできます（BEMミックスを使用しています;これはロシア語でtalkです）。それは有用であり、link elem of b-navにjavascriptコードからアクセスする必要があります。

<ul class="b-nav"> 

    <li class="b-nav__item"> 

     <a href="#" class="b-nav__link b-link"> Item </a> 

    </li> 

</ul> 

Answer 3

"要素内の要素の使用は、BEM方法論では推奨されません。それはそれ以上です。基本的な命名構造に関する

、Smashing Magはこれを実行する方法を表示する偉大なツリー図を持っている：個人的に

{ 
    block: 'page', 
    content: { 
    block: 'head', 
    content: [ 
     { block: 'menu', content: ... }, 
     { 
     elem: 'column', 
     content: { block: 'logo' } 
     }, 
     { 
     elem: 'column', 
     content: [ 
      { 
      block: 'search', 
      content: [ 
       { elem: 'input' }, 
       { 
       elem: 'button', 
       content: 'Search' 
       } 
      ] 
      } 
     ] 
     }, 
     { 
     elem: 'column', 
     content: { 
      block: 'auth', 
      content: ... 
     } 
     } 
    ] 
    } 
} 

私はなりますfollwoing JSON形式でうまく変換可能である

<b:page> 
    <b:head> 
    <b:menu> 
     ... 
    </b:menu> 
    <e:column> 
     <b:logo/> 
    </e:column> 
    <e:column> 
     <b:search> 
     <e:input/> 
     <e:button>Search</e:button> 
     </b:search> 
    </e:column> 
    <e:column> 
     <b:auth> 
     ... 
     </b:auth> 
    <e:column> 
    </b:head> 
</b:page> 

2番目のバージョンを使用することをお勧めします - 3番目に、ulとタグの間の関係/依存関係はクラスの命名では表されません。 さて、すでに2年間でこれを解決しているかもしれませんが、同様のBEM構文で同様に失われた人は、この回答が役に立ちます。