MerixGames

11 lutego 2016

/ code & tools

BEM - metodologia tworzenia kodu

Jacek Spławski

Porządek w kodzie to rzecz święta i o tym nikogo nie trzeba przekonywać. Tylko jak się do tego zabrać? Na szczęście ktoś zadał już sobie to pytanie wcześniej. Odpowiedzią jest wdrożenie konwencji organizacji klas CSS.

Istnieje kilka wiodących konwencji organizacji klas CSS. Do najpopularniejszych można z pewnością zaliczyć OOCSS, SMACSS, SUITCSS, Atomic oraz BEM. Choć warto poznać podstawy choćby kilku z nich, by móc dokonać świadomego wyboru, dziś skupimy się na tej ostatniej.

Konwencje organizacji klas CSS - po co?

Wyobraźmy sobie, że mamy duży projekt, nad którym pracuje wielu programistów, a czas jego trwania zakładany jest na co najmniej kilka miesięcy. Brzmi jak idealny przepis na chaos, prawda? To właśnie w takich sytuacjach odpowiednia organizacja kodu HTML i CSS potrafi zdziałać cuda.

Odpowiedni dobór metodologii organizacji klas pozwala na szybsze pisanie kodu, a także zredukowanie jego ilości. Niektóre z konwencji (na przykład BEM) poprawiają nie tylko czytelność kodu CSS, ale także HTML. Trzymanie się określonych reguł usprawnia kooperację między programistami oraz znacząco skraca czas potrzebny na wdrożenie nowych osób w projekt.

OK, czyli warto zawracać sobie tym głowę tylko w przypadku dużych projektów, tak? 

Moim zdaniem zawsze warto pisać zgodnie z jakąś metodologią. Niech pierwszy rzuci kamieniem ten, kto nigdy nie brał udziału w „małym projekcie”, który z czasem rozrastał się do niewyobrażalnych rozmiarów tylko dlatego, że klient chciał dodać „jeszcze jedną funkcjonalność”. Chyba już rozumiecie o co mi chodzi :) 

BEM – z czym to się je?

BEM (z ang. Block, Element, Modifier) to jedna z najpopularniejszych konwencji organizacji klas w CSS, która w całości opiera się na trzech podstawowych komponentach: blokach, elementach i modyfikatorach.

Pierwsza zasada, którą należy zapamiętać dotyczy sposobu w jaki nazywamy klasy:

  • nazwy zapisujemy wykorzystując cyfry i małe litery (nie stosujemy zapisu camelCase)
  • jeżeli nazwa składa się z więcej niż jednego członu, poszczególne człony rozdzielamy myślnikiem
  • do zapisu bloków, elementów i modyfikatorów wykorzystujemy wyłącznie klasy

Dowiedzmy się teraz czym charakteryzują się poszczególne komponenty i kiedy je stosować:

Blok (z ang. block)

Stanowi nadrzędny poziom abstrakcji, o którym możemy myśleć jak o  kontenerze, w który opakowujemy część kodu. Blok powinien stanowić w pełni niezależny fragment strony. Podstawową cechą bloków jest to, że mogą być one wielokrotnie wykorzystywane w obrębie całej strony. Dodatkowo bloki można zagnieżdżać wewnątrz innych bloków.

 Block

Nazwa bloku powinna jednoznacznie wskazywać za co odpowiada dany fragment kodu. Za przykład niech posłuży nam klasa .btn, która służy do definiowania przycisków.

Element

Jest nieodłączną częścią bloku, która jest do niego przypisana i nie może zostać użyta poza nim.

Element

Nazwę elementu tworzymy poprzez połączenie nazwy bloku oraz nazwy elementu, rozdzielając je między sobą znakiem podwójnego podkreślenia ( __ ). Bazując na poprzednim przykładzie możemy utworzyć elementy o klasach .btn__name i .btn__counter.

Modyfikator (z ang. Modifier)

To flaga, którą możemy przypisać do bloku lub modułu. Jej nadanie wpływa na zmianę wyglądu lub zachowania elementu, na który została nadana. Modyfikatory stosuje się głównie do wyróżniania stanu poszczególnych bloków lub elementów.

Modifier

Nazwę modyfikatora tworzymy łącząc nazwę bloku lub elementu, który chcemy zmodyfikować z nazwą modyfikatora za pomocą podwójnego myślnika ( — ). Rozwijając dalej nasz przykład z poprzednich punktów, powiedzmy, że chcemy wyróżnić dwa stany przycisków, które mogą się różnić między sobą kolorem tła lub innymi właściwościami. W tym celu chcemy nadać naszemu blokowi .btn klasy .btn—positive i .btn—negative.

Spójrzmy teraz jeszcze raz na nasz przykład, tym razem w całości:

BEM w parze z Sassem

Patrząc na powyższy przykład na pewno zauważyliście, że w kodzie Sass wykorzystuję znak "&" (ampersand). Znak ten pozwala na odwoływanie się do elementu nadrzędnego, w którym dany selektor został zagnieżdżony. W kodzie wynikowym znak ten zostanie zastąpiony klasą nadrzędną. Dzięki takiemu zapisowi skracam swój kod co przekłada się na jego czytelność.


W internecie możecie znaleźć gotowe wstawki (z ang. mixins) dla Sassa, których z można skorzystać. Temat wydaje się być dość obszerny i przyznam szczerze, że nigdy nie czułem potrzeby zagłębiania się w niego. Domyślny mechanizm dziedziczenia rodzica zawsze mi wystarczał. Odnoszę wrażenie, że sens ich stosowania pojawia się dopiero przy bardziej skomplikowanych zagnieżdżeniach klas, których w swoich projektach unikam. W końcu staramy się pisać zgodnie z zasadą KISS (Keep It Simple, Stupid).


Jeżeli chcecie dowiedzieć się więcej o Sassie koniecznie przeczytajcie mój poprzedni artykuł i oficjalną dokumentację.

BEM: podsumowanie

Na początku przygody z konwencjami organizacji klas CSS warto spróbować co najmniej kilku, aby zdecydować, która najlepiej nam odpowiada. Moim zdaniem nie ma dobrych i złych. Są tylko takie, w których czujemy się lepiej i gorzej. Mnie najbardziej przekonał do siebie BEM, który w połączeniu z Sassem daje duże możliwości.


Pamiętajcie tylko o jednym, potrzeba trochę czasu by przyzwyczaić się do nowego sposobu nazywania klas. Uwierzcie mi jednak, że warto. Korzyści płynące ze stosowania BEM (lub innej metodologii) są niewymierne do czasu poświęconego na naukę i przyzwyczajenie.


I ostatnia rzecz, najważniejsza jest konsekwencja. Decydując się na daną metodologię stosujcie ją od początku do końca w obrębie całego projektu. Chyba, że chcecie spłonąć we frontendowym piekle ;)

Myślisz o realizacji projektu?

Skontaktuj się z nami. Przygotujemy wycenę, opowiemy o szczegółach i procesie wdrożenia.

Napisz do nas

Strona używa plików cookies. Wyrażasz zgodę na używanie cookies, zgodnie z aktualnymi ustawieniami przeglądarki.