Określanie stylów dla elementów potomnych modyfikatora BEM

Question

Mam następujący BEM stylów CSS, aby zdefiniować proste okno:

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

ja również potrzeba, aby móc wyświetlić okno w trybie błędu więc mieć zdefiniowane następujące modyfikator:

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

problem mam jest znalezienie dobrego sposobu definiowania stylów dla zagnieżdżonych elementów, takich jak box__heading gdy okno jest w trybie błędu.

Czy ja również zdefiniować modyfikatory na nagłówek, jak również jednostki dominującej:

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

czy po prostu zrobić to w css:

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

Answer 1

Oba sposoby są ważne.

z modyfikatorem na elemencie:

.box__heading--error { 
} 

lub z kaskadą: jeśli Twój blok może być zagnieżdżone wewnątrz siebie (rekurencyjnie), potem trzeba

.box--error .box__heading { 
} 

Jednak aby uniknąć kaskada. Na przykład:

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

Tutaj nie można wykorzystać kaskadę, ponieważ .box--error .box__heading będzie projektować pole 2.

Answer 2

dla najlepszej praktyce wystarczy użyć modyfikatora box--error na pojemniku skrzynki. Gdy mamy do czynienia z bardziej złożonymi modułami, nie chcemy dodawać klasy modyfikującej do wszystkich elementów, które wymagają stylów zgodnie z modyfikatorem.

W przykładzie Tarha są dwa pola klasy ćwiczeń. Spowodowałoby to problem, gdyby style nie pozostały inne, powinny po prostu nie mieć tej samej nazwy klasy.