Blog

Metodologia BEM – jak pisać czytelny i skalowalny kod CSS

1. Czym jest metodologia BEM?

Metodologia BEM (Block, Element, Modifier) to sposób organizacji i nazewnictwa klas w CSS, który ułatwia pisanie zrozumiałego, modularnego i skalowalnego kodu. BEM został stworzony przez zespół Yandex w celu rozwiązywania problemów związanych z dużymi projektami frontendowymi. Dzięki jasno określonym zasadom strukturyzacji kodu, BEM minimalizuje ryzyko konfliktów w nazwach klas i sprawia, że kod staje się łatwiejszy do utrzymania.

Podstawową ideą BEM jest podział kodu na trzy główne jednostki: bloki, elementy i modyfikatory. Każda z tych jednostek ma swoje zasady nazewnictwa, co pozwala na precyzyjne zdefiniowanie relacji między elementami strony.

2. Zasady BEM – bloki, elementy i modyfikatory

Aby lepiej zrozumieć, jak działa BEM, przyjrzyjmy się jego podstawowym komponentom:

a) Blok

Blok to niezależny komponent, który może istnieć samodzielnie i pełnić określoną funkcję na stronie. Może to być np. przycisk, menu, nagłówek lub karta produktu.

Przykład:

<div class=”menu”></div>

b) Element

Element to część składowa bloku, która zależy od bloku i nie może istnieć bez niego. Elementy są powiązane z blokami i odpowiadają za wewnętrzne struktury danego komponentu. W nazwach elementów stosujemy podwójny podkreślnik __.

Przykład:

<div class=”menu”>
<div class=”menu__item”></div>
</div>

W tym przypadku menu__item jest elementem bloku menu.

c) Modyfikator

Modyfikator to specyficzna wersja bloku lub elementu, która zmienia jego wygląd lub zachowanie. Modyfikatory są dodawane do istniejących klas za pomocą podwójnego myślnika --.

Przykład:

<div class=”menu menu–large”>
<div class=”menu__item menu__item–active”></div>
</div>

W tym przykładzie modyfikator menu--large zmienia rozmiar bloku, a menu__item--active zmienia stan elementu.

3. Dlaczego warto używać BEM w CSS?

Stosowanie metodologii BEM w projektach frontendowych przynosi wiele korzyści, zwłaszcza gdy pracujesz nad większymi aplikacjami. Oto najważniejsze zalety:

a) Lepsza czytelność kodu

Dzięki jasnym zasadom nazewnictwa, kod CSS staje się łatwiejszy do zrozumienia. Każda klasa dokładnie określa swoją funkcję, co ułatwia identyfikację jej roli w projekcie. Nawet nowi członkowie zespołu mogą szybko zrozumieć strukturę projektu.

b) Zwiększona modularność

BEM promuje podejście modułowe, gdzie każdy blok i element jest niezależny. To pozwala na ponowne wykorzystanie tych samych komponentów w różnych miejscach bez ryzyka konfliktów stylów. Dzięki temu rozwój i utrzymanie kodu są prostsze, a modyfikacje w jednym miejscu nie wpływają na inne elementy.

c) Skalowalność projektu

W miarę rozwoju projektu, stosowanie BEM ułatwia zarządzanie coraz większą ilością stylów. Struktura oparta na blokach, elementach i modyfikatorach zapewnia porządek w kodzie, co sprawia, że łatwiej wprowadzać zmiany i rozszerzać funkcjonalności bez obawy o powstanie bałaganu.

d) Unikanie konfliktów nazw

Jednym z największych problemów w projektach CSS jest konflikt nazw klas, zwłaszcza gdy różne komponenty zaczynają ze sobą kolidować. BEM eliminuje ten problem dzięki swojemu systemowi nazewnictwa, który wyraźnie oddziela bloki, elementy i modyfikatory.

4. Jak efektywnie stosować BEM?

Aby skutecznie wdrożyć BEM w projekcie, warto trzymać się kilku kluczowych zasad:

a) Zrozumienie struktury projektu

Przed rozpoczęciem kodowania warto dokładnie przemyśleć strukturę komponentów na stronie. Podział na bloki, elementy i modyfikatory powinien być logiczny i oparty na funkcjonalności danego fragmentu interfejsu.

b) Unikanie nadmiaru modyfikatorów

Chociaż modyfikatory są użyteczne, nadmiar ich stosowania może prowadzić do zbyt skomplikowanego kodu. Warto stosować modyfikatory tylko tam, gdzie są naprawdę potrzebne, i dbać o prostotę kodu.

c) Zachowanie spójności

Spójność w nazewnictwie to klucz do efektywnego korzystania z BEM. Upewnij się, że wszyscy członkowie zespołu stosują te same zasady i konwencje, co pozwoli uniknąć zamieszania w projekcie.

d) Przykład praktyczny – karta produktu

Przyjrzyjmy się prostemu przykładowi wykorzystania BEM do stylizacji karty produktu:

<div class=”product-card product-card–featured”>
<div class=”product-card__image”></div>
<div class=”product-card__title”>Nazwa produktu</div>
<div class=”product-card__price product-card__price–discounted”>$99.99</div>
</div>

W tym przykładzie:

• product-card to blok,
• product-card__image, product-card__title i product-card__price to elementy bloku,
• product-card--featured i product-card__price--discounted to modyfikatory zmieniające wygląd.

5. Narzędzia wspierające pracę z BEM

Współczesne narzędzia mogą wspomóc pisanie kodu zgodnego z BEM. Oto kilka z nich:

• PostCSS: Narzędzie do przetwarzania CSS, które pozwala na automatyzację i optymalizację kodu. Możesz zainstalować pluginy wspierające BEM, które pomagają w zarządzaniu złożonymi stylami.
• SASS/SCSS: Użycie preprocesorów CSS, takich jak SASS, pozwala na pisanie zagnieżdżonych stylów i łatwe zarządzanie blokami oraz elementami.
• Linters: Narzędzia do sprawdzania poprawności kodu, takie jak stylelint, mogą wspomagać utrzymywanie spójności nazw w BEM.

6. Podsumowanie

Metodologia BEM to potężne narzędzie, które pozwala na pisanie czytelnego, skalowalnego i łatwego w utrzymaniu kodu CSS. Dzięki wyraźnemu podziałowi na bloki, elementy i modyfikatory, można uniknąć problemów związanych z konfliktami nazw oraz chaosu w strukturze kodu. Jeśli pracujesz nad większymi projektami frontendowymi, warto rozważyć wdrożenie BEM jako standardu organizacji stylów.

Kurs Metodologia BEM - jak pisać dobry kod CSS