• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

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

Object Storage Arubacloud
0 głosów
234 wizyt
pytanie zadane 11 grudnia 2019 w HTML i CSS przez michh123 Bywalec (2,790 p.)

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!

 

2 odpowiedzi

+2 głosów
odpowiedź 12 grudnia 2019 przez Comandeer Guru (603,480 p.)
wybrane 12 grudnia 2019 przez michh123
 
Najlepsza

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.

komentarz 12 grudnia 2019 przez michh123 Bywalec (2,790 p.)

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?

1
komentarz 12 grudnia 2019 przez Comandeer Guru (603,480 p.)

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ą.

komentarz 12 grudnia 2019 przez michh123 Bywalec (2,790 p.)

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! :)

0 głosów
odpowiedź 12 grudnia 2019 przez jaca121212 Nałogowiec (40,760 p.)

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

Chyba o takie coś ci chodziło?

Przykład

komentarz 12 grudnia 2019 przez michh123 Bywalec (2,790 p.)

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?

komentarz 12 grudnia 2019 przez jaca121212 Nałogowiec (40,760 p.)

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

Podobne pytania

0 głosów
2 odpowiedzi 486 wizyt
pytanie zadane 28 lutego 2018 w HTML i CSS przez modular Użytkownik (520 p.)
+2 głosów
1 odpowiedź 225 wizyt
pytanie zadane 30 kwietnia 2021 w HTML i CSS przez rafal.budzis Szeryf (85,350 p.)
+1 głos
1 odpowiedź 197 wizyt
pytanie zadane 14 sierpnia 2021 w HTML i CSS przez kajman_Rrzeczny Użytkownik (960 p.)

92,761 zapytań

141,685 odpowiedzi

320,479 komentarzy

62,105 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...