Nauczyć się języka, a następnie napisać stronę czy aplikację jest stosunkowo prosto. Prosto tym bardziej, gdy tworzy się ją jednym ciągiem, bez żadnych przerw w projekcie. Wiemy wtedy, gdzie znajdują się pliki, znamy kod, wiemy która klasa za co odpowiada i gdzie znajdują się ewentualne niedoskonałości. Problem zwykle pojawia się wtedy, gdy wracamy do kodu po przerwie. Nagle okazuje się, że to, co napisaliśmy wcale nie jest tak logiczne i takie fajne, jak nam się wydawało w chwili pisania kodu. Jeszcze gorzej jest, gdy przejmujemy kod po kimś, kto postępował podobnie i wprowadził do niego sobie tylko znane i stosowane nawyki. Tworzy to idealny przepis na spaghetti code.

Aby uniknąć zamieszania i bałaganu sformułowane zostały zasady tworzenia nazewnictwa klas kodu. Do najpopularniejszych należą OOCSS, SMACC, Atomic, SUITCSS oraz BEM. Tym ostatnim zajmiemy się dzisiaj, a pozostałymi w kolejnych częściach.

BEM

BEM, z angielskiego Block, Element, Modifier (czyli blok, element, modyfikator) to konwencja nazewnictwa klas CSS.
Czym charakteryzują się te elementy? Spójrzmy:

.block – odniesienie klasy do bloku

__ element  (poprzedzony dwoma podkreślnikami) – wskazuje na element, którego klasa dotyczy

–modifier (poprzedzony dwoma myślnikami) – wskazuje klasę, która jest modyfikatorem

Należy pamięć również o kilku najważniejszych zasadach:

  • wykorzystujemy tylko małe litery i cyfry (czyli zapisać możemy nazwaklasy lub nazwa-klasy ale nie nazwaKlasy)
  • stosujemy wyłącznie klasy, bez użycia identyfikatorów
  • używamy unikalnych nazw dla każdego elementu

Przejdźmy teraz do szczegółowego omówienia elementów.

Blok

Odnosi się do większych elementów, takich jak: header, container, menu, checbox, input
Przycisk formularza kontaktowego zazwyczaj tworzy się wpisując:

 <form> </form>

<button>

Następnie, odpowiednio do danego projektu, przechodzi się do stylowania odpowiedniego elementu. Problem pojawia się wtedy, gdy np. jeden przycisk ma być zielony, a drugi czerwony. Nadając elementowi button tło zielone sprawimy, że wszystkie przyciski będą zielone, ale żeby kolejny był czerwony musimy posiłkować się na przykład takim zapisem:

.wczesniejsza-nazwa button {
    background-color: red;
}

Zapis ten nie jest jednak najczytelniejszy i wymaga pewnej analizy kodu HTML. Dlatego zamiast odnosić się do elementu button w metodologii BEM odnosimy się do stworzonej klasy button.

Wyglądałoby to np. tak:

<button class=”button”> Przykład </button>

a styl CSS tak:

.button {
    background-color: red;
}

Zauważ, że ostylowaliśmy klasę button (wskazuje na to kropka przed słowem button), a nie cały element. Jeżeli chcielibyśmy stworzyć drugi przycisk o innym kolorze, musielibyśmy zastosować modyfikator, o czym za chwilę.

Element
Są to elementy zawarte w blokach, czyli m.in. menu item, list item, checkbox caption, header title itp – krótko mówiąc – dzieci bloku. Dla przypomnienia – tworzy się go poprzez dodanie podwójnego podkreślenia i nazwy elementu, tak jak w tym przykładzie: .menu__trigger

Widząc taki zapis od razu wiadomo, że trigger znajduje się w obrębie .menu

<div class=”menu”>
    <div class=”trigger”>
        <!– –>        
    </div>
</div>

Zapis taki ma wielką zaletę: dzięki niemu struktura kodu jest stosunkowo płaska.

Modyfikator

Modyfikator elementów (czyli flaga na bloku lub elemencie) – używany do zmiany wyglądu lub zachowania, jak np. disabled, highlighted, checked, color yellow itp. Tworzy się go poprzez dodanie dwóch myślników do konkretnego bloku, jak w przykładzie:

.button- -success

Wróćmy do naszego przykładu z przyciskiem. Standardowo przycisk jest czerwony o paddingu: 10 px 30px. Chcemy stworzyć drugi przycisk o tych samych wymiarach, ale w kolorze zielonym. Kod HTML będzie zatem wyglądał następująco:

<button class=”button”> Przykład </button>
<button class=”button button–success”> Przykład </button>

A kod CSS w taki sposób:

.button {
    padding: 10px 30px;
    background-color: red;
}

Zauważ, że w drugim przykładzie nie istnieje konieczność ponownego deklarowania własności padding, gdyż została ona już zaimplementowana w wykorzystanej klasie .button

Postępujemy dokładnie tak samo dla każdego przypadku, jeżeli chcemy zmienić wygląd lub zachowanie któregoś z naszych elementów.

Przykłady:

Przykład 1
Chcemy stworzyć 3 przyciski – neutralny, sukces i ostrzeżenie. W kodzie HTML wyglądać będzie to następująco:

<button class=”button”>
    Pierwszy przycisk
</button>

 <button class=”button-success”>
    Drugi przycisk
</button>

<button class=”button–danger”>
    Trzeci przycisk
</button>

Z kolei kod CSS będzie wyglądał tak:

.button {
    padding: 10px 30px;
    border: 1px solid black;
}

.button–success {
    background-color: green;
    color: white;
}

.button–danger {
    background-color: red;
    color: white;
}

Jak widzisz, przycisk drugi i trzeci będzie miał dokładnie takie same własności i wartości padding i border, jak w przycisku pierwszym. Różnica polega na kolorze tła i czcionki.

Przykład 2
Jak widzisz blok contact zawiera w sobie dwa inputy do wprowadzania zawartości oraz

<div class=”contact”>
    <form class=”contact__form contact__form-appearance”>
        <input class=”contact__input” type=”text” name=”name”>
        <input class=”contact__input–gray” type=”password” name=”password”>
        <button class=”contact__button contact__button_login”> Zaloguj się </button>
        <button class=”contact__button contact__button_register”> Zarejestruj się </button>
    </form>
</div>

dwa przyciski, które w zależności od swojego przeznaczenia mają inny wygląd.

Zalety

Z powyższego wynikają 3 główne zalety stosowania zasad BEM:

  • modułowość – style nie zależą od innych elementów na stronie, zatem nie będzie problemów z kaskadowością, co więcej – istnieje łatwa możliwość przenoszenia gotowych elementów z jednego projektu do drugiego.
  • prostsze utrzymanie kodu i ponowne użycie ich w innym projekcie (możesz nawet stworzyć własną bibliotekę bloków)
  • prostota – dzięki standaryzacji kod jest prostszy do zrozumienia

Wnioski

Metodologię warto stosować w każdym projekcie – niezależnie od jego wielkości czy opłacalności (bo i czasem nad projektem spędzi się za dużo czasu w stosunku do zarobku). Pomoże to jednak uprościć późniejsze utrzymanie, utrwala się dobre nawyki a nade wszystko – pozostawia się po sobie dobre wrażenie.

Marcin Dłubis