BEM - modyfikator bloku

Question

Dzień dobry, mam pytanie odnośnie do metodyki BEM. Jak zaimplementować element, który bardzo się wyróżnia wyglądem (zawartość taka sama) na tle pozostałych elementów tego typu? Poniżej zamieszczam zdjęcie poglądowe.

Mamy wygląd elementu A) i chcemy wystylować wygląd B).

Struktura elementu A mogłaby być taka (pomijając semantykę)

<div class="entry">
    <div class="entry__date">Data</div>
    <div class="entry__title">Tytuł 1</div>
    <div class="entry__content">...</div>
</div>

Moje proponowane rozwiązania to

<div class="entry entry--dark">
    <div class="entry__date">Data</div>
    <div class="entry__title">Tytuł 2</div>
    <div class="entry__content">...</div>
</div>

albo

<div class="entry entry--dark">
    <div class="entry__date entry__date--secondary">Data</div>
    <div class="entry__title entry__title--invert">Tytuł 2</div>
    <div class="entry__content">...</div>
</div>

W pierwszym rozwiązaniu łamana jest płaska specyficzność css'a, natomiast w drugim dodane dużo nadmiarowego kodu oraz utrudniona programowa zmiana tego bloku, gdyż trzeba użyć aż trzech funkcji js.

Właściwie pytanie powinno brzmieć, czy modyfikator bloku może modyfikować właściwości elementów tego bloku? Oraz jak rozwiązalibyście powyższy problem?

Answer 1

<div class="entry entry--dark">
    <div class="entry__date">Data</div>
    <div class="entry__title">Tytuł 2</div>
    <div class="entry__content">...</div>
</div>

Ten kod ^ jest poprawnym rozwiązaniem. Możesz też użyć zmiennych CSS wówczas zachowasz płaskie selektory. np:

.entry {
     --title-color: #000;
}
.entry--dark {
     --title-color: #fff;
}
.entry__title {
     color: var(--title-color);
}

https://budzis.pl/Wpisy/Kursy/Optymalizacja-stron/Metodologia-BEM/