Metodologia BEM – jak z niej korzystać + 3 zasady, o których przez długi czas nie miałem pojęcia

Front-end 6 minut czytania

W programowaniu dobrze jest stosować się do przyjętych norm, aby nasz kod był przyjemniejszy dla innych deweloperów i często bardziej wydajny. Tak jak HTML ma znaczniki semantyczne, języki programowania – wzorce projektowe i frameworki, tak CSS posiada metodologie.

I tak nie da się ukryć, że zdecydowanie najpopularniejszą z nich jest BEM (Block-Element-Modifier), która to skradła serca deweloperów przez swoją prostotę i łatwość w wykorzystywaniu szczególnie przy pisaniu w preprocesorach takich jak Sass czy Less.

Ale skoro jest taka popularna, to powiedzmy o niej kilka zdań. 🙂

W takim razie o co chodzi w tej technice?

W skrócie mamy 3 rzeczy. Konkretny blok (na przykład sekcję na stronie), składa się on z elementów – może mieć w sobie rzeczy takie jak nagłówek, zdjęcia, przyciski, teksty i wiele wiele innych – to wszystko może być elementem konkretnego bloku.

Co ważne to one wszystkie zwykle będą się powtarzać w obrębie witryny (w końcu słabym pomysłem jest, aby np. każdy przycisk na stronie był zupełnie inny. Gdy jednak chcemy wyróżnić dany element, to posłużymy się trzecią składową naszej metodologi, jaką jest modyfikator, który służy do zmiany tego powtarzalnego elementu (na przykład gdy jeden przycisk ma nie być biały, a zielony).

W porządku. Tylko jak to odróżnić w praktyce?

W przypadku bloków jest najprościej:

.blok
.blok-skladajacy-sie-z-kilku-wyrazow

Jak widać zapisujemy je tak jak zwykle deklaruje się klasy bez narzuconej metodologi – konkretnym wyrazem lub kilkoma, oddzielonymi pojedynczymi myślnikami.

Z kolei element zapisujemy jako blok oraz nazwa elementu rozdzielone dwoma __ (nigdy nie wiem jak na to powiedzieć, podkreślnikami 🤔). W ten oto sposób:

.blok__element

Co ważne warto od razu podkreślić i do czego wrócę mówiąc o tytułowych trzech błędach to to, że element nie może mieć swojego elementu. Musi być składową konkretnego bloku.

Ale dobrze, są jeszcze modyfikatory. Zapisujemy je podobnie jak elementy, tylko że zamiast „podkreślników” używamy myślników, w ten oto sposób:

.blok--modyfikator
.blok__element--modyfikator

Jak widać możemy modyfikować całe bloki jak i pojedyncze elementy. Co jeszcze ważne to modyfikator musi zawsze iść w parze z oryginalnym elementem:

// Tak jest dobrze
.blog__element .blok__element--modyfikator

// Tak niekoniecznie
.blok__element--modyfikator

Może spójrzmy na konkretny przykład, w którym stworzymy prosty element banera na stronie:

See the Pen BEM w praktyce by Robert Orliński (@ROrlilnski) on CodePen.

Mam nadzieję, że jest on dla Ciebie zrozumiały. 🙂 Jeśli tak, to w takim razie chyba wszystko co warto wiedzieć o budowie tej metodologii. Co jeszcze istotne, to ma ona kilka zasad, których warto przestrzegać. Oto one:

Jakich zasad przestrzegać pisząc kod wg. metodologii BEM?

1. Nie zagnieżdżajmy elementów

Tak jak już wspomniałem – element nie może mieć swojego elementu. Nawiązując do poprzedniego przykładu coś takiego nie może mieć miejsca:

See the Pen Nie zagnieżdżajmy elementów by Robert Orliński (@ROrlilnski) on CodePen.

W tytule tego wpisu użyłem sformułowania „o których przez długi czas nie miałem pojęcia”, dlatego błagam nie patrz do kodu tego motywu. :’)

2. Używajmy klasy dla wszystkich elementów

Jedną z zasad tej metodologii mówi nam aby do każdego elementu na stronie odwoływać się po klasach, a nie po ID lub selektorach. Dlatego znów powołując się na ten sam przykład:

See the Pen Używajmy klasy dla wszystkich elementów by Robert Orliński (@ROrlilnski) on CodePen.

…coś takiego nie jest efektem, który chcielibyśmy osiągnąć. Widać zresztą, że stylowanie w ten sposób jest lekko pokręcone już przy tak małym bloku.

3. Modyfikatory mają modyfikować elementy, a nie je zastępować

Ostatnią kwestią jaką chciałbym poruszyć to sprawa modyfikatorów. Chodzi dokładnie o taką sytuację wspomnianą przy okazji tłumaczenia tej składowej:

See the Pen Modyfikatory modyfikują elementy, a nie je zastępują by Robert Orliński (@ROrlilnski) on CodePen.

Jak widać niepotrzebnie stworzyliśmy kilka dodatkowych lini stylując od nowa pierwszy przycisk zamiast tylko go zmodyfikować.

Podsumowanie

I tak oto dotarliśmy do końca tej próby wytłumaczenia czym jest metodologia BEM oraz jakie są jej ogólne zasady. Mam nadzieję, że udało Ci się wynieść coś wartościowego z tego artykułu. 🙂

Komentarze

Może dodasz coś od siebie?