BEM, nazewnictwo klas

Question

Chciałbym się spytać o to czy poprawnie zastosowałem BEM'a. Jakieś wskazówki, wyjaśnienia, bo zapewne błędnie z tego korzystam:

<header class="header">
            <div class="header__left"></div>
            <div class="header__right">
                <div class="header__content-container"></div>
            </div>
</header>

 

Answer 1

Nope, nazwy nie powinny być związane ze stylem elementu.

Answer 2

ja bym zrobił na przykład zamiast: "header__left" to "header--first" i analogicznie --second. A dlaczego? a no dlatego, że być może np. na desktopie będzie to left/right, ale może na mobilce 320px będzie to już jeden div pod drugim?

"header__content-container" - wydaje mi się, że mogłoby być np. samo "header__content"

ale to tak na szybko, może wypowie się ktoś lepszy w hateemela odemnie :) (Comandeer choć no tu :P )

Comments

ehkm first xD?

---

to tylko przykład, chodzi mi o to, że left/right mocno wskazują na to jakie style klasa ustawia i mam tu obawy, że na mobilkach może to nie mieć sensu. Czy first/second były lepszy? Nie wiem, na pewno mniej związany z konkretnymi stylami, nie wiem, może lepiej byłoby np. __title i __content itp. itd.

---

Rozumiem, że ty rozumiesz, ale jak dajesz przykłady to solidne, bo co jeżeli second będzie nagle first a first nie będzie wcale, bo okaże się niepotrzebny

---

nie wiemy kompletnie co tam jest, to jakiś fragment totalnie wyrwany z całego kodu więc nie da się doradzić nic konkretnie :)

---

ogólnie to header__first i header__second (z tą belką na dole) jako że first i second nie są stanami lub modyfikatorami :) ale nie powinno się używać takich nazw a powinny opisywać co się znajduje w środku :P 

rodzic__dziecko--modyfikator

/* to jest dobrze */
header__container
header__logo
header__navigation

header__navigation--mobile