Elementy mogą zawierać bloki w bem

Question

Powiedziano mi, że nie miałem racji, pisząc kod, tak jak poniżej. Przypuszczam, że elementy nie mogą zawierać bloków i ich złego b.e.m.

<ul class="b-nav"> 

    <li class="b-nav__item"> 

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


    </li> 

</ul> 

Myślałem o napisaniu tego w ten sposób, ale nie pokazuje on również hierarchii.

<ul class="b-nav"> 

    <li class="b-nav__item"> 

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


    </li> 

</ul> 

Oto inny sposób, ale wydaje mi się, że jest gorszy od powyższego przykładu.

<ul class="b-nav"> 

    <li class="b-nav__item"> 

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


    </li> 

</ul> 

Czy sposób, w jaki oryginalnie to zakodowałem, jest nieprawidłowy? Jeśli tak, dlaczego i jaka jest najlepsza alternatywa.

Answer 1

Myślę, że nazwanie go nav_ link jest bardziej akceptowane niż nav _item__link, nawet jeśli link należy do pozycji. Może to, co robiłem, było przesadą, by pokazać tę hierarchię. W końcu oba należą do tego samego bloku.

Widziałem kilka przykładów w komentarzach każdego linku poniżej

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

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

Answer 2

należy używać próbek drugiego lub trzeciego.

Albo możesz użyć tego (używa miksów BEM, mamy talk na ten temat po rosyjsku). Pomocne jest wtedy uzyskanie dostępu do kodu link elem z b-nav z kodu javascript.

<ul class="b-nav"> 

    <li class="b-nav__item"> 

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

    </li> 

</ul> 

Answer 3

"Używanie elementów w elementach nie jest zalecane przez metodologię BEM." - to wszystko, nic więcej, nic mniej.

chodzi podstawowej struktury nazewnictwa, Smashing Mag ma wielkie drzewo postać wyświetlania, jak należy to zrobić:

<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> 

który jest ładnie umożliwiającego przejście w follwoing formacie JSON:

{ 
    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: ... 
     } 
     } 
    ] 
    } 
} 

Osobiście byłoby zaleca się używanie drugiej wersji - w trzeciej relacja/zależność między ul i tagami nie jest reprezentowana w nazewnictwie klas. Cóż, prawdopodobnie już rozwiązałeś to w ciągu ostatnich 2 lat, ale być może ktoś podobnie zagubiony we właściwej składni BEM uzna tę odpowiedź za przydatną ...