Metodologia BEM w React

W projektach Reactowych jednym z najważniejszych wyzwań jest stworzenie reużywalnych w obrębie całego projektu komponentów. Odpowiednio napisane komponenty potrafią znacząco przyśpieszyć pracę programisty. Jednym z elementów komponentu jest oczywiście jego wygląd, który może zmieniać się w zależności od kontekstu jego użycia. Stylowanie komponentów przy użyciu tradycyjnego CSS potrafi przysporzyć wielu problemów, gdy style napisane są w chaotyczny i nieprzemyślany sposób, co może znacząco utrudniać pracę z kodem. Tutaj z pomocą przychodzi sprawdzona metodologia BEM, która w pewien sposób definiuje to, w jaki sposób programista powinien nazywać klasy w CSS. 

Czym dokładnie jest BEM?

BEM jest metodologią nazywania klas w CSS, bazuje ona na podejściu wydzielania poszczególnych części UI do reużywalnych bloków. Skrót BEM pochodzi od słów Block (blok), Element (element) oraz Modifier (modyfikator).

Block (blok) – jest to w pełni niezależny komponent UI, nazwa bloku definiuje czym jest dany element np.: form, menu lub navigation. Wybierając nazwę bloku powinniśmy kierować się tym, czym dany blok jest, a nie tym jak on wygląda (nazwanie bloku np.: blue-form będzie więc błędem).

Element (element) – jest to część bloku. Schemat nazywania elementu wygląda następująco:

block__element (np.: menu__item)

Nazwa elementu zawiera więc również nazwę bloku, którego element jest częścią. Nazywając dany element oddzielamy jego nazwę od nazwy bloku, w którym element się znajduję za pomocą dwóch znaków podkreślenia. Element może zostać użyty tylko jako część bloku.

Modifier (modyfikator) – definiuje on różnego typu stany bloku lub elementu np.: disabled, small itd.  Nazywając dany modyfikator oddzielamy jego nazwę od nazwy bloku lub elementu za pomocą dwóch myślników lub jednego znaku podkreślenia (dokumentacja BEM sugeruje używanie jednego znaku podkreślenia, jednak częściej spotykałem się z zapisem alternatywnym z dwoma myślnikami). Modyfikator nie może zostać użyty poza kontekstem bloku lub elementu, służy on do zmiany domyślnego wyglądu danego bloku lub elementu. Przykładowy modyfikator wygląda następująco:

block__element--modifier (np.: menu__item--active) lub block__element_modifier (np.: menu__item_active). Istnieją dwa rodzaje modyfikatorów:

1.     Boolean (np.: disabled, active) –  modyfikator posiadający tylko nazwę (oznacza to, że modyfikator został zastosowany),

2.     Key-value (np.: size-small) – modyfikator posiadający swoją nazwę oraz wartość (oznacza to, że modyfikator size został zastosowany z wartością small).

Przykładowe reguły CSS stosujące metodologię BEM:

.menu { ...declarations }

.menu--expanded { ...declarations }

.menu__item { ...declarations }

.menu__item--active { ...declarations }

.menu__title { ...declarations }

.menu__title--size-big { ...declarations }

Należy zaznaczyć również, że element jest częścią bloku, a nie innego elementu, nie powinno się zatem nazywać klas elementów w taki sposób:

.menu__item__title 

Znając kilka prostych reguł jesteśmy w stanie praktycznie od razu stwierdzić jak wygląda hierarchia w danym bloku, a same nazwy klas są bardzo klarowne.

BEM wraz z preprocesorem CSS

Prawdziwą siłę metodologii BEM widać, gdy zastosujemy ją wraz z wybranym preprocesorem CSS np.: Sass. Preprocesor Sass pozwala między innymi na zagnieżdżanie selektorów CSS wewnątrz siebie, rozwiązanie takie pozwala na wyraźne pogrupowanie danych bloków, co dodatkowo zwiększa czytelność kodu. Powyższy przykład z przykładowymi reguły CSS mógłby zostać napisany w następujący sposób:

.menu {
  ...declarations

  &--expanded {
    ...declarations
  }

  &__item {
    ...declarations

    &--active {
      ...declarations
    }
  }

  &__title {
    ...declarations

    &--size-big {
      ...declarations
    }
  }
} 

Podsumowanie

Wykorzystanie metodologii BEM w projekcie napisanym w React pozwala na lepsze skalowanie projektu oraz zwiększa czytelność pisanego kodu. Podejście polegające na wydzielaniu poszczególnych części UI w niezależne bloki świetnie sprawdza się w połączeniu z React, który również zakłada wydzielanie poszczególnych części UI do mniejszych, reużywalnych komponentów. Wykorzystywanie znanych przez wielu programistów metodologii pozwala również na łatwiejsze zrozumienie napisanego kodu przez osoby, które dołączają do istniejącego już projektu. Dzięki temu proces onboardingu jest znacznie szybszy.

Sam BEM zakłada również różnego typu alternatywne konwencje nazewnictwa (więcej tutaj: https://en.bem.info/methodology/naming-convention/#alternative-naming-schemes).