stili Specifica per elementi figlio di un modificatore BEM

Question

Ho la seguente BEM stile css per definire una semplice scatola:

.box { /*styles */ } 
.box__heading {/*styles */} 
.box__image { /*styles */} 

Ho anche bisogno di essere in grado di mostrare la casella in modalità di errore in modo da avere definito il seguente modificatore:

.box--error {/*styles */} 

il problema che sto avendo è trovare un buon modo per definire gli stili per gli elementi nidificati, come box__heading quando la casella è in modalità errore.

Do Ho anche definire modificatori sulla voce e sul genitore:

<div class="box box--error"> 
    <h2 class="box__heading box__heading--error"></h2> 
</div> 

o devo solo fare questo nel css:

.box--error {} 
.box--error .box__heading { /* error styles*/ } 

Answer 1

I due modi sono validi.

Con un modificatore sull'elemento:

.box__heading--error { 
} 

o con una cascata:

.box--error .box__heading { 
} 

Tuttavia, se il blocco può essere nidificato all'interno stesso (ricorsivamente), poi si deve evitare il cascata. Per esempio:

<div class="box box--error"> 
    <h2 class="box__heading box__heading--error">Box 1</h2> 
    <div class="box"> 
     <h2 class="box__heading">Box 2</h2> 
    </div> 
</div> 

Qui non è possibile utilizzare una cascata, perché .box--error .box__heading sarebbe lo stile casella 2.

Answer 2

per la migliore pratica basta utilizzare il modificatore box--error sul contenitore scatola. Quando si hanno a che fare con moduli più complessi, non si desidera aggiungere una classe di modifica a tutti gli elementi che richiedono stili in base al modificatore.

Nell'esempio di Tarh ci sono due classi box__heading. Ciò causerebbe un problema se gli stili non dovessero rimanere altri saggi questi semplicemente non avrebbero lo stesso nome di classe.