Denominazione di una classe Elemento wrapper quando si utilizza BEM

Capisco che quando si utilizza BEM, i nomi di classe non dovrebbero riflettere direttamente la struttura HTML, ma come deve essere nominato un elemento wrapper? Si prega di ignorare la mia sintassi particolare (vicino a SUIT); segue ancora BEM, solo con un diverso modo di differenziare gli elementi.Denominazione di una classe Elemento wrapper quando si utilizza BEM

Ad esempio:

<div class="?"> 
    <footer class="PageFooter"> 
    <h4 class="PageFooter-brand>…</h4> 
    <ul class="PageFooter-contactDetails">…</ul> 
    </footer> 
<div>

vorrei attualmente classe wrapper in questo caso come PageFooterWrapper, ma questo si sente goffo perché l'involucro non è indipendente - esiste unicamente a PageFooter. Ovviamente il prefisso di tutto con PageFooter- è ridicolo, quindi solo le foglie trattano l'involucro come parte di PageFooter: PageFooter-wrapper. Questo mi infastidisce in quanto vi è un suggerimento implicito applicato da questo.

Quindi quale dovrebbe essere la classe del wrapper?

fonte

2015-07-06 Undistraction

Perché è necessario un wrapper attorno allo

@Rob Non essere così pedante. Questo è un esempio fatto per la domanda. – Undistraction

Non essere affatto pedante. È un'osservazione tecnica di qualcuno ovviamente più esperto di te. Quale scopo serve? – Rob

Il modo in cui ho sempre trattato che è l'involucro dovrebbe essere sempre il blocco in modo:

<div class="PageFooter"> 
    <footer class="PageFooter-inner"> 
    <h4 class="PageFooter-brand">...</h4> 
    <ul class="PageFooter-contactDetails">...</ul> 
    </footer> 
</div>

Il B blocco contiene E lementi così invece di avere qualcosa intorno alla mia B blocco ho appena seguito con il principio di lement E e iniziato utilizzando inner invece di contenitori

fonte

2015-07-06 12:09:33

Grazie. Questo ha un senso, anche se non credo che mi piaccia il fatto che il wrapper sia ora l'elemento di livello superiore in termini di classi. Un wrapper è l'esempio perfetto di qualcosa che potrebbe facilmente diventare non necessario/necessario al cambiare del layout, quindi accoppiarlo al footer come questo mi sembra sbagliato. Trattandolo come un elemento secondario può essere facilmente rimosso senza influire su nient'altro. In breve, hai reso il footer molto meno autonomo e meno portabile. – Undistraction

Se questo è il caso, si potrebbe sostenere che il wrapper non è specifico di "PageFooter", è specifico per il contenuto che lo circonda poiché si basa sul layout delle cose intorno ad esso.Quindi potrebbe avere senso disaccoppiarli e avere il wrapper legato al layout del sito rispetto al 'PageFooter'? –

Sì. Questo è esattamente ciò a cui mi sto rivolgendo. Dovrebbe essere un elemento figlio del contenitore piuttosto che parte del piè di pagina. Tratto spesso un elemento come un contenitore di layout con slot per i sottoelementi, quindi penso che questa sia solo una variante di ciò. – Undistraction

Ho un ctually utilizzato due classi con successo, il mio modello è la seguente:

<div class='page-section bem-block'> 
    <div class='bem-block__element'> 
     <!-- etc etc --> 
    </div> 
</div>

modo efficace utilizzando un utility class per eseguire determinate funzioni wrapper. Il css sarebbe probabilmente simile a questo:

.page-section { 
    width: 100%; 
} 
@media screen and (min-width: 1200px) { 
    margin: 0 auto; 
    width: 1200px; 
}

Ho trovato questo funziona in pratica. Sarebbe anche possibile per .bem-block ed è contemporaneo ereditare da .page-section.

Questa soluzione completa Dan Gamble.

fonte

2015-07-16 21:09:37

Denominazione di una classe Elemento wrapper quando si utilizza BEM

risposta

Problemi correlati