BEM - blok, element i mix, a zewnętrzna geometria

Question

Cześć.

Mam pytanie dot. metodologi BEM. Głównie chodzi o różnicę w stosowaniu bloków, elementów i mixów.

Na sam początek czy dobrze rozumiem, że blok jest uniwersalny, po to aby można go było powielać, i całkowicie niezależny - czyli jeśli "wyrwę" go z jednej strony to mogę go również "wsadzić" do innej i będzie działać oraz wyglądać tak samo, i nie powinien wpływać na otoczenie, zawierać zewnętrznej geometrii typu: marginesy, paddingi, itp...?

Czy dobrze również rozumiem, że element jest zależny od bloku (musi być zagnieżdżony w pewnym bloku) i może zawierać style zewnętrznej geometrii?

Jeżeli faktycznie tak jest to mam praktyczne pytanie. Weźmy jako przykład prosty nagłówek: 
 

<header class="header">
    <h1 class="header__title">Tytuł</h1>
    <p class="header__subtitle">Podtytuł</p>
    <p class="header__text">Jakiś tam tekst</p>
</header>

Chciałbym teraz w CSS ustawić headerowi padding tak, aby elementy wewnątrz niego były trochę "wcięte". Naturalnie dodałbym dla klasy header padding, ale BEM na to nie pozwala, bo ten węzeł jest blokiem. 
Mogę więc (choć w tym przypadku wydaje mi się to złym rozwiązaniem) zrobić tak: 
 

<header class="header">
    <div class="header__container">
        <h1 class="header__title">Tytuł</h1>
        <p class="header__subtitle">Podtytuł</p>
        <p class="header__text">Jakiś tam tekst</p>
    </div>
</header>

Czyli dodałem element div o klasie header__container, do którego już mogę dodać styl z paddingiem. Ale podążając za dokumentacją, są mixy. Więc wydaje mi się, że mogę zrobić tak:
 

<header class="header header__container">
    <h1 class="header__title">Tytuł</h1>
    <p class="header__subtitle">Podtytuł</p>
    <p class="header__text">Jakiś tam tekst</p>
</header>

I teraz węzeł header jest mixem, tzn. blokiem i elementem (wiem, że nazwa header__container nie jest poprawna, ale nie miałem pomysłu jak inaczej nazwać). I teraz CHYBA mogę w klasie header zastosować style ogólne, a w klasie header__container zawrzeć padding. ALE możliwe, że mogę też zrobić tak: 

<header class="header">
    <h1 class="header__container header__container--title">Tytuł</h1>
    <p class="header__container header__container--subtitle">Podtytuł</p>
    <p class="header__container header__container--text">Jakiś tam tekst</p>
</header>

I w klasie header__container dla każdego elementu ostylować padding, a pozostałe style dla poszczególnych elementów umieścić w klasach modyfikatorów, ale to już w ogóle wydaje mi się całkowicie niepoprawne.

Czy moglibyście, proszę, odpowiedzieć na powyższe pytania i wyjaśnić, które podejście jest właściwe, o ile któreś z nich jest, a jeśli nie, to podać wskazówki? Jeden padding a ja nad tym myślę już chyba z godzinę... :)

Z góry dziękuję za pomoc!

 

Answer 1

Nie można zrobić miksa w taki sposób, żeby blok był równocześnie swoim własnym elementem – to całkowicie nielogiczne i niezgodne z zasadami BEM. Miksa można stosować wtedy, kiedy blok jest równocześnie elementem innego bloku, np.

<form class="form">
    <input class="form__input input">
</form>

Z kolei przykład z modyfikatorami jest IMO bez sensu, bo traci się większość korzyści z możliwości tworzenia elementów, określających konkretne części bloku.

Jeśli chodzi o padding, to on nie jest przecież zewnętrzną geometrią – zwłaszcza jeśli stosuje się border-box. Wówczas po prostu problem nie istnieje.

Comments

Jeeest! Czekałem na Ciebie, Comandeer :) Dzięki za info o padding, zapamiętam na całe życie. Ale co jeżeli weźmiemy margin i position zamiast padding? Np:

<header class="header">
    <h1 class="header__title">Tytuł</h1>
    <p class="header__subtitle">Podtytuł</p>
    <p class="header__text">Jakiś tam tekst</p>
</header>

Więc mogę ustawić pozycjonowanie i zewnętrzną geometrię dla węzłów h1 i p, bo są one elementami. Ale załóżmy, że chcę ustawić te właściwości dla headera. Wówczas nie mogę, bo jest on blokiem. Miksa z headera również nie mogę zrobić, bo jest on (załóżmy) niezagnieżdżony w żadnym innym bloku. Czy optymalnym rozwiązaniem może być stworzenie kontenera-elementu dla elementów h1 i p, zagnieżdżonego w headerze? W ten sposób:
 

<header class="header">
    <div class="header__container">
        <h1 class="header__title">Tytuł</h1>
        <p class="header__subtitle">Podtytuł</p>
        <p class="header__text">Jakiś tam tekst</p>
    </div>
</header>

I teraz ustawiłbym dla elementu header__container właściwości margin i position. Czy jest to optymalne i zgodne z BEM rozwiązanie?

---

Wówczas pewnie pojawi się tzw. margin collapsing i margines ostatecznie i tak trafi do .header ;)

Osobiście aż tak bym się nie przejmował tym, że bloki nie mogą mieć żadnych stylów wpływających na coś zewnątrz. W idealnym świecie tak by było, ale na szczęście w takim nie żyjemy. Dla mnie w BEM o wiele ważniejsze jest to, że pozwala podzielić stronę na sensowne komponenty. Całkowita izolacja stylów to IMO dodatek – fajny, ale wciąż tylko dodatek.

Można kombinować z dodatkowymi elementami, którym będziemy nadawać style, ale dla mnie to przerost formy nad treścią.

---

Z Twoich komentarzy i innych artykułów tutaj, i na innych portalach wnioskuję, że BEM powinienem traktować hierarchicznie w sposób:

1. architektura + dzielenie strony
2. implementacja w kodzie
3. nazewnictwo klas
4. izolacja stylów

Dzięki za pomoc i poprawki! :)

Answer 2

Wstaw kod CSS zobaczy się gdzie leży problem.

Chyba o takie coś ci chodziło?

Przykład

Comments

To było pytanie teoretyczne, ale fakt, że chcę zrefaktoryzować kod ;) Kod, który podałem powyżej jest tylko przykładem. A dokładnie chodzi mi o wspomnianą geometrię zewnętrzną. Dokumentacja BEM mówi, że nie powinniśmy ustawiać paddingów, marginów, etc. dla bloków. Weźmy na ten przykład ten sam kod, ale chwilowo bez BEM
 

<!-- kod bez BEM -->
<header class="header">
    <h1 class="title">Tytuł</h1>
    <p class="subtitle">Podtytuł</p>
    <p class="text">Jakiś tam tekst</p>
</header>

I taki celowo prosty kod CSS (chwilowo również bez BEM):
 

/*chwilowo bez BEM, ale docelowo blok*/
.header {
  background: red;
  padding: 30px; /*o m.in. taka geometrie zewnetrzna mi chodzi*/
}

/*chwilowo bez BEM, ale docelowo elementy*/
.header > * {
  display: inline-block;
}

I teraz .header docelowo ma być blokiem w BEM i nie powinien zawierać tego paddingu. Jaka więc dla tego przykładu będzie najlepsza praktyka, aby dodać ten padding stosując BEM?

---

Rozumiem możesz ustawić  klasę header bez  padingu  a  w innej klasie  ustawić  pading  gdzie później będziesz mógł dodać tą klasę do elementu bloku.

Widzę że element header  z klasą . header  jest ustawiony że posiada owy pading.

Jeżeli chcesz uzyskać efekt aby nie cały  element header  miał ustawiony pading to  klasę

.header  ustawiasz do konkretnego elementu.

Owszem można ustawić  dla całego elementu pading tak jak masz to wyżej  napisane ale jeżeli chciałbyś aby nie  był ten pading zastosowany dla np.

<h1 class="title">Tytuł</h1>

to musisz mu nadać  padding:0;

przeanalizuj ten kod Przykład