Come impostare correttamente l'ambito di un elemento utilizzando BEM?

Data la seguente struttura BEM, dove esistono cinque livelli nidificati:Come impostare correttamente l'ambito di un elemento utilizzando BEM?

collection-main__features-top__story__byline__author

secondo la convenzione di denominazione di BEM, quando un elemento è parte di un blocco e non ha alcun significato di fuori del blocco a cui appartiene, ciò che è il modo corretto di nominare la classe author?

Dal momento che un author è semanticamente legata al byline e il contesto story, ma senza senso sotto i blocchi features-top e collection-main, qual è il miglior nome BEM?

collection-main__author 
features-top__author 
story__author (best?) 
story__byline__author 
byline__author

Cosa succede se una nuova features blocco viene introdotto?

collection-main__features-top__story__byline__author (target) 
collection-main__features-bottom__story__byline__author 

features-top__story__author 
story--features-top__author (best?)

Infine, che cosa succede se viene aggiunto un altro collection blocco e vogliamo per lo stile secondo elemento autore nella lista?

collection-main__features-top__story__byline__author 
collection-main__features-bottom__story__byline__author (target) 
collection-sub__features-top__story__byline__author 
collection-sub__features-bottom__story__byline__author

faremmo qualcosa di simile?

story--collection-main--features-bottom__author

Ci deve essere una soluzione migliore.

fonte

2015-01-12 Eric Xu

Per favore, mostra i tuoi dati in uscita. E 'come '{collezione-principale: [{ "feature-item": {storia: {autore: ''}}}]}'? –

BEM vieta di inserire elementi negli elementi in CSS!
Si effettua l'errore più tipico nel markup BEM - scrivendo un block__element__element. È necessario creare nuovi blocchi anziché copiare il DOM-tree.

Ad esempio:
Right HTML:

<div class='block'> 
    <div class='block__elem1'> 
     <div class='block__elem2'></div> 
    </div> 
    <div class='block__elem3'></div> 
</div>

destro CSS:

.block {} 
.block__elem1 {} 
.block__elem2 {} 
.block__elem3 {}

Se avete bisogno di fare un elemento di un elemento, allora avete bisogno di fare un nuovo blocco o fai il tuo bem-tree con un singolo elemento annidato!

SBAGLIATO:

<div class='block'> 
    <div class='block__elem1'> 
     <div class='block__elem1__elem2'></div> 
    </div> 
</div>

RIGHT 1 #: Fai un nuovo blocco

<div class='block1'> 
    <div class='block2'> 
     <div class='block2__elem'></div> 
    </div> 
</div>

RIGHT 2 #: Fai la tua bem-albero con un singoli elementi annidati

<div class='block'> 
    <div class='block__elem1'> 
     <div class='block__elem2'></div> 
    </div> 
</div>

Prestare attenzione: non è possibile inserire elementi in un elemento nel css, ma è possibile n e dovrebbe mettere gli elementi in un elemento in html! Albero DOM e albero BEM possono essere diversi.

Non scrivere nomi strani, inserendo il nome dell'elemento nel nome del blocco!

SBAGLIATO:

.block {} 
.block-elem1 {} 
.block-elem1__elem2 {}

perché si ottiene un problema con nomi strani quando si tenta di spostare il blocco:

<div class='other-block'> 
    <div class='block-elem1'></div> 
</div>

annidati elementi HTML è un DOM-albero.
I nomi delle classi che scrivi sono BEM.
Senti la differenza!

DOM-tree:

<ul> 
    <li> 
    <a> 
     <span></span> 
    </a> 
    </li> 
</ul> 

.ul {} 
.ul > li {} 
.ul > li > a {} 
.ul > li > a > span {}

BEM-albero:

<ul class="menu"> 
    <li class="menu__item"> 
    <a class="menu__link"> 
     <span class="menu__text"></span> 
    </a> 
    </li> 
</ul> 

.menu {} 
.menu__item {} 
.menu__link {} 
.menu__text {}

Riferimenti:

"Un elemento è una parte costituente di un blocco che non può essere utilizzato al di fuori di esso. " https://en.bem.info/methodology/key-concepts/#element

un elemento è una parte di un blocco! Non fa parte dell'elemento! Leggi Vitaly Harisov, l'autore di BEM-metodologia: https://twitter.com/harisov/status/403421669974618112

Classname come "block__elem__elem___elem" significa che coder non ha capito nulla in BEM.

Come impostare correttamente l'ambito di un elemento utilizzando BEM?

risposta

Problemi correlati