Gli elementi possono contenere blocchi in bem

Question

Mi è stato detto che avevo torto per scrivere il codice come ho di seguito. Suppongo che gli elementi non possono contenere blocchi e il suo male b.E.m.

<ul class="b-nav"> 

    <li class="b-nav__item"> 

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


    </li> 

</ul> 

Ho pensato di scriverlo in questo modo ma non mostra anche la gerarchia.

<ul class="b-nav"> 

    <li class="b-nav__item"> 

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


    </li> 

</ul> 

Ecco un altro modo, ma per me sembra peggio dell'esempio sopra.

<ul class="b-nav"> 

    <li class="b-nav__item"> 

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


    </li> 

</ul> 

È il modo in cui ho originariamente codificato in modo errato? Se è così, perché, e qual è la migliore alternativa.

Answer 1

Penso che nominarlo nav_ link è più accettato di nav _item__link, anche se un link appartiene a un oggetto. Forse quello che stavo facendo era eccessivo per mostrare quella gerarchia. Alla fine, entrambi appartengono allo stesso blocco.

Ho visto alcuni esempi nei commenti di ogni link qui sotto

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

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

Answer 2

Si consiglia di utilizzare campioni di seconda o terza.

Oppure si potrebbe usare questo (usa i mix BEM, abbiamo uno talk su questo in russo). È utile quindi è necessario accedere a link elem di b-nav dal codice javascript.

<ul class="b-nav"> 

    <li class="b-nav__item"> 

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

    </li> 

</ul> 

Answer 3

"L'utilizzo di elementi all'interno di elementi non è raccomandato dalla metodologia BEM." - Questo è tutto, niente di più, niente di meno.

Per quanto riguarda la struttura di base di denominazione, Smashing Mag ha una grande figura albero di visualizzazione come questo dovrebbe essere fatto:

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

che è ben trasformabile in follwoing formato 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: ... 
     } 
     } 
    ] 
    } 
} 

Personalmente vorrei consiglio di usare la tua seconda versione - nella terza la relazione/dipendenza tra la ul e un tag non è rappresentata nella denominazione della classe. Beh, probabilmente hai già risolto questo problema negli ultimi 2 anni, ma forse qualcuno che ha perso la sintassi BEM giusta troverà questa risposta utile ...