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

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

Czas czytania:

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

Blok

Główny kontener zawierający część kodu. Charakteryzuje się niezależnością, która sprawia, że nasz pojemnik zawsze będzie wyświetlany w taki sam sposób. Każdy blok pisany jest pod wielokrotne użycie, co znacząco ułatwia pracę. Może być również zagnieżdżony w innym bloku. Za przykład posłużymy się formularzem do logowania na stronie. Jego nazwa powinna być unikatowa i jednoznacznie wskazywać na przeznaczenie. Mówiąc inaczej: jego nazwa odpowiada na pytanie „Co to jest?”. Nazwijmy nasz blok po prostu jako „authorization”, który wpasowuje się w tę regułę.
HTML
<div class="authorization"></div>
CSS
.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.
HTML
<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>
CSS
.authorization{
    &__form {
        padding: 10px;
        background: white;
    }
    &__input {
        font-size: 10px;
        padding-left: 10px;
    }
    &__button {
        padding: 10px;
        font-size: 15px;
        border-radius: 10px;
    }
}
Elementy mogą się również znajdować w innych elementach bez limitu poziomu zagnieżdżenia.
HTML
<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
Kiedy wybrać blok, a kiedy element?
Może się zdarzyć, że wpadniemy w zakłopotanie, czy dany dany fragment nazwać blokiem, czy elementem. W takich momentach powinniśmy chwilę się zastanowić i wybrać jedną możliwość.
Jeżeli kod będzie używany w wielu miejscach na stronie, a jego wygląd ma być niezależny od miejsca występowania — powinniśmy stworzyć blok.
Jeżeli kod będzie nieodłączną częścią rodzica i będzie od niego zależne — powinniśmy stworzyć element.

Modyfikator

Podmiot opisujący wygląd danego bloku bądź elementu. Dzięki niemu możemy nadać poszczególnym fragmentom odpowiedni rozmiar (size-big), motyw (theme-dark), stan (disabled) i cechę (center). Nazwa modyfikatora powinna składać się z przedrostka nazwy elementu bądź bloku oddzielonego jednym dwoma myślnikami (–), bądź jednym pokreśleniem (_) . Zaktualizujmy nasz kod dodając do niego modyfikatory.
HTML
<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>
CSS
.authorization{
    &__form {
        &--theme-dark {
            background: grey;
        }
    }
    &__button {
        &--size-big {
            font-size: 20px;
        }
    }
}
Trzeba pamiętać, że modyfikator nie może występować bez bloku / elementu. Jeśli stworzymy <button> nadając mu jedynie klasę ” authorization__button–size-big” będzie to niezgodne z metodologią BEM. Modyfikator ma zadanie jedynie zmienić cechy szczególne, a nie je zastąpić. Dlatego prawidłowy fragment kodu będzie zawierał również „authorization__button „.

Kto powinien stosować metodologie?

Bez wyjątku każdy powinien stosować reguły, które znacząco podnoszą czytelność, jakość pisanego kodu. Każdy projekt będzie dostarczał nam nowych bloków, które w każdej chwili będziemy mogli przenieść do następnego projektu. Dodatkowo inne osoby współpracujące z nami i współtworzące projekt sprawnie wprowadzą swoje modyfikacje. My sami również po dłuższym braku pracy nad danym projektem nie będziemy musieli domyślać się co do czego służy. Mniejszy rozmiar kodu i znacząca szybkość w tworzeniu również mają swoje plusy. Istnieją oczywiście inne metodologie, ale w tym artykule chciałem przedstawić najpopularniejszą, jaką jest BEM.

Więcej na temat BEM?

Żądnych większej wiedzy na temat opisane metodologi odsyłam do stron poniżej zawierające przydatne informacje i obszerne dokumentacje.
zapraszamy do kontaktu

UI2WEB.com jest firmą technologiczną skupioną wokół rozwiązań WordPress / WooCommerce /PHP/ HTML5. Oferujemy zarówno usługi wdrożeniowe jak również body leasing programistów front-end oraz back-end.

Jeśli trafiłeś tu poszukując odpowiedzi na istniejące problemy i masz dość współpracy z freelancerami a stawiasz na bezkompromisową jakość.

Zapraszamy do kontaktu

Może Cię również zainteresować:

Czy warto decydować się na usługę wdrożenia WooCommerce i na czym ona polega?

Wtyczka do WordPressa WooCommerce wydaje się być prostym sposobem na stworzenie sklepu internetowego. Wystarczy instalacja,… Read More

Min(), max(). clamp() – nowe funkcje w css

Używanie relatywnych jednostek długości do budowania responsywnych layoutów może być problematyczne. Elementy, których rozmiar uzależniony… Read More