BEM - ten sam blok w tym samym bloku.

Question

Hej mam problem i nie za bardzo mam pomysł jak to dobrze ugryźć. Przykład poniżej będzie uproszczonym przykładem mojego problemu. Korzystam z BEM i pierwszy raz natrafiłem na ścianę. 

<div class="box box--dark">
    <div class="box__title">main title</div>
    <div class="box__content">
        <div class="box">
            <div class="box__title">sub title 1</div>
            <div class="box__content">
                content 1
            </div>
        </div>
        <div class="box">
            <div class="box__title">sub title 2</div>
            <div class="box__content">
                content 2
            </div>
        </div>
    </div>
</div>

Przez to że używam ten sam blok BEMowy mam problem. Modyfikator dla pierwszego bloku (w tym przykładzie dark ) wpływa i modyfikuje bloki które są dziećmi. Pierwsze co przychodzi do głowy to odwrócić kolejność modyfikatorów. Np tak : 

 

<div class="box">
    <div class="box__title">main title</div>
    <div class="box__content">
        <div class="box box--white">
            <div class="box__title">sub title 1</div>
            <div class="box__content">
                content 1
            </div>
        </div>
        <div class="box box--white">
            <div class="box__title">sub title 2</div>
            <div class="box__content">
                content 2
            </div>
        </div>
    </div>
</div>

Ale niestety przykładowy box jest komponentem Reactowym którym dość często wykorzystujemy w systemie od ponad roku. Obecnie pierwszy raz pojawiła się potrzeba aby jeden box wrzucić do środka drugiego. A odwrócenie modyfikatorów było by dość skomplikowane. Zastanawiam się czy dało by się zabezpieczyć przed tym problemem na poziomie selektorów? 

Mieliście podobne problemy? Jak je rozwiązaliście? 

Answer 1

A dlaczego modyfikator wpływa na zagnieżdżony .box? Przecież ten wewnętrzny powinien mieć ustawione domyślne stylowanie, które nadpisze to wynikające z modyfikatora.

.box {
    // domyślne stylowanie
}
.box--dark {
    // nadpisanie domyślnych stylów
}

 

Comments

Ponieważ mój modyfikator bloku zmienia również elementy. W sumie nigdy się nad tym nie zastanawiałem. To zgodne z BEM? 

.box--dark .box__title {
    color: white;
}

W sumie gdy teraz tak o tym myślę to może warto przerobić to tak aby modyfikatory edytowały CSSowe zmienne które są używane wewnątrz elementów. To chyba by rozwiązało problem. Jednak jestem ciekaw czy znasz jakieś alternatywy?

Każdy BEMowy bloku w naszej aplikacji to jeden komponent Reactowy. Łatwiej było przekazać jedną właściwość (modyfikator bloku) niż robić coś bardziej skomplikowanego do każdego elementu osobno. 

---

Ponieważ mój modyfikator bloku zmienia również elementy. W sumie nigdy się nad tym nie zastanawiałem. To zgodne z BEM? 

Tak, jest to zgodne. Bardziej bym się zastanowił nad zagnieżdżaniem bloku w samym sobie – to jest bardziej nietypowe, ale też bym to uznał za poprawne.

W sumie gdy teraz tak o tym myślę to może warto przerobić to tak aby modyfikatory edytowały CSSowe zmienne które są używane wewnątrz elementów. To chyba by rozwiązało problem. Jednak jestem ciekaw czy znasz jakieś alternatywy?

Myślę, że jest to najbardziej eleganckie rozwiązanie. I prawdę mówiąc, nie przychodzi mi do głowy nic innego, niż to. W teorii można też wymusić, by tylko elementy będące bezpośrednimi dziećmi danego bloku były stylowane (.box--dark > .box__title), ale to już brzmi mniej elegancko i pewnie powodowałoby problemy ze specyficznością. 

---

Dzięki za odpowiedź :) .box--dark > .box__title się u nas nie sprawdzi bo mamy więcej elementów dzieci niż jeden z przykładu. Strasznie by się selektory rozrosły.