Metodologia BEM. Dlaczego warto pisać kod CSS modułowo?

Każdy developer podczas pracy nad projektem stosuje różne metody, aby uporządkować kod w sposób jak najbardziej elastyczny, modułowy i zrozumiały dla innych developerów. BEM, czyli „Blok Element Modyfikator” (ang. Block Element Modifier) jest to podejście w znacznym stopniu pomagające osiągnąć taki efekt. Opracowane zasady przez firmę Yandex pozwalają w łatwy sposób sprawić, aby praca stała się prostsza i jednocześnie przyjemniejsza.

Dzięki zastosowaniu w swoich projektach metodologii nasz kod nabierze dużo większej spójności i stanie się modułowy. Raz napisany fragment posłuży nam wielokrotnie (również w innych projektach) przez co powtarzalność zostaje całkowicie wyeliminowana. Zwiększa się produktywność,a zdanie „Do less, get more” staje się synonimem BEM. Skoro tyle pozytywnych efektów może przynieść to gdzieś musi być ukryty haczyk, prawda? Właśnie nie. Nawet nauka nie powinna nikomu przysporzyć problemów co potwierdza głoszone zdanie na oficjalnej stronie –  wszystkie zasady przeczytasz przy porannej kawie.

Sprawdźmy więc, czym charakteryzuje się ta konwencja. Jak sama nazwa wskazuje będziemy poruszać się po trzech identyfikatorach, które są klasami. Nazwy klas zapisujemy z wykorzystaniem cyfr i małych liter, a wyrazy w nazewnictwie oddzielamy myślnikami (np. dropdown-menu).

<div class="authorization"></div>

.authorization {
    max-width: 400px;
    padding: 25px;
    display: block;
    background: white;
}

Żaden blok wewnątrz, nie powinien wpływać na środowisko, w którym się znajduje. Używanie marginesu albo ustalanie pozycji nie jest zalecane. Oczywiście nic nie stoi na przeszkodzie, aby stworzyć wyjątek. Inne przykłady nazewnictwa bloków:

header, menu, search.

Całą stronę internetową można umieścić w jednym bloku i dodawać w niej kolejne bloki odpowiedzialne za np. panel boczny, stopkę, nawigację. Podczas surfowania po internecie w łatwy sposób powinniśmy określić bloki z jakich się składa dany serwis i ich poszczególne poziomy.

Źródło maujor.com

Element

Nieodłączna część, która znajduje się tylko w wybranym bloku i wchodzi w jego skład. Określa przeznaczenie poszczególnych elementów umieszczonych w pojemniku. Jego nazwa określa, czym jest dany element w bloku (np. input, button) i tworzymy ją poprzez dodanie przedrostka nazwy bloku z dwoma podkreśleniami (__). Idąc za wcześniejszym przykładem, stwórzmy kilka elementów, które będą znajdować się w bloku. Wykorzystamy do tego postprocesor (LESS, SASS), który sprawi, że czytelność kodu znacząco się poprawi.

<div class="authorization">
    <form class="authorization__form">
        <p><input class="authorization__input"  type="text" name="firstname"></p>
        <p><input class="authorization__input"  type="password" name="password"></p>
        <p><button class="authorization__button">Zaloguj się</button></p>
    </form>
</div>

.authorization{
    &__form {
        padding: 10px;
        background: white;
    }
    &__input {
        font-size: 10px;
        padding-left: 10px;
    }
    &__button {
        padding: 10px;
        font-size: 15px;
        border-radius: 10px;
    }
}

<div class="blok">
    <div class="blok__elem1">
        <div class="blok__elem2">
            <div class="blok__elem3"></div>
        </div>
    </div>
</div>

Blok autoryzacji składa się z kilku elementów służących do interakcji z użytkownikiem. Każdy element może występować nieograniczoną ilość razy przez co zmniejsza się wielkość pliku ze stylami. Jak jednak zmienić kolor, albo inną cechę elementu skoro każdy jest taki sam? Błędna jest odpowiedź, aby pisać nowy element z tylko innym kolorem, albo poprzez użycie następnego elementu. Użyjemy tutaj modyfikatora.

Źródło: bot.kz

<div class="authorization">
    <form class="authorization__form authorization__form--theme-dark">
        <input class="authorization__input"  type="text" name="firstname">
        <input class="authorization__input authorization__input"  type="password" name="password">
        <button class="authorization__button authorization__button--size-big">Zaloguj się</button>
    </form>
</div>

.authorization{
    &__form {
        &--theme-dark {
            background: grey;
        }
    }
    &__button {
        &--size-big {
            font-size: 20px;
        }
    }
}