Cześć.
Czy stosując metodologię BEM możemy używać selektorów potomka w CSS dla klas? Konkretnie chodzi mi o:
.block__element--modifier .blok {
/*style CSS*/
}
W dokumentacji nie znalazłem informacji na ten temat, a chcę ostylować nawigację dla urządzeń mobilnych, otwieraną za pomocą przycisku-hamburgera. Po naciśnięciu przycisku zostanie otwarte menu. Wymyśliłem coś takiego (kod dla ułatwienia jest bardzo uproszczony):
<nav class="navigation navigation--opened">
<ul class="navigation__list">
<li class="navigation__item">
<a class="navigation__link" href="#">Link 1</a>
</li>
<li class="navigation__item">
<a class="navigation__link" href="#">Link 2</a>
</li>
<li class="navigation__item">
<a class="navigation__link" href="#">Link 3</a>
</li>
<li class="navigation__item">
<a class="navigation__link" href="#">Link 4</a>
</li>
</ul>
<button type="button" class="hamburger">
<img src="obrazek.png" alt="Przycisk otwarcia menu" class="hamburger__icon hamburger__icon--opened">
<img src="obrazek.png" alt="Przycisk zamknięcia menu" class="hamburger__icon hamburger__icon--closed">
</button>
</nav>
modyfikator navigation--opened jest dodawany przez JS kiedy użytkownik otworzy menu za pomocą przycisku. Wtedy chciałbym wystylizować potrzebne komponenty w CSS (tak, aby menu było widoczne):
.navigation--opened .navigation__list {
/*style CSS*/
}
.navigation--opened .navigation__item {
/*style CSS*/
}
.navigation--opened .navigation__link {
/*style CSS*/
}
/*itd...*/
Czy w BEM poprawne jest ustawianie selektora potomka i w dodatku tak, że przodkiem jest modyfikator, a potomkiem blok lub element, jak wyżej? Czy takie podejście jest / może być zgodnie z metodologią BEM?
Z góry dziękuję za pomoc!