Developerzy podczas prac nad projektami stosują różne metody, aby uporządkować pisany kod w sposób jak najbardziej elastyczny, modułowy i zrozumiały dla innych developerów. Organizacja kodu jest kluczem do zwiększenia efektywności pracy programisty. Metodyka BEM jest jedną z wielu metod utrzymywania czystego i funkcjonalnego kodu. To właśnie ją developerzy Ferryta wykorzystują w pracy nad aplikacją. Dowiedz się o niej więcej!

Czym są w ogóle metodyki?

Zanim wyjaśnimy więcej na temat tego, czym jest metodyka BEM, wytłumaczymy czym w ogóle są metodyki i dlaczego się je stosuje. Jak sama nazwa wskazuje Metodyka oznacza zbiór jakichś metod oraz zasad ogólnych. Występuje ona praktycznie w każdej dziedzinie. W HTML i CSS metodyki są tworzone po to, aby utrzymać wybrany przez siebie standard kodu. Istnieje wiele innych metodyk, które pomagają programistom w porządkowaniu kodu. Oprócz BEM mamy także m.in. OOCSSSMACSS czy też Atomic Design. Jednakże dla aplikacji Ferryt wybrana została właśnie metodyka BEM. 

Dowiedz się więcej o: platforma Ferryt

Czym jest BEM?

Pod skrótem BEM kryje się Block Element Modifier. Celem metodyki jest pogrupowanie interfejsu użytkownika w niezależne komponenty. Wydzielone komponenty można ponownie wykorzystać w innym miejscu bez potrzeby kopiowania istniejącego rozwiązania (zasada DRY). Metodyka BEM nie jest tylko układem nazewnictwa CSS. Podejście to pozwala opisać interfejs użytkownika niezależnie od technologii, która jest wykorzystana.

Zalety wykorzystywania metodyki BEM

  • Jest bardzo prostą metodyką do opanowania w kontekście CSS
  • Pozwala na tworzenie prostej i zrozumiałej architektury projektu
  • Jest łatwa w utrzymaniu oraz edycji
  • Umożliwia podział elementów na moduły, co wiąże się z łatwym przenoszeniem kodu pomiędzy projektami, by móc go ponownie wykorzystać

Metodyka BEM i jej podstawy

Block

Określa on samo znaczenie danego komponentu. Jest bazą dla pozostałych elementów. Najczęściej jest to element, który „wrapuje” komponent/ moduł np.:

  • header
  • menu
  • button
  • checkbox

Element

Jest on bezpośrednio związany z Block.Nie może on występować samodzielnie:

  • header__title
  • menu__item

Modifier

Pozwala on ma na zmianę wyglądu lub zachowania danego elementu lub bloku:

  • menu__item—active
  • buton—disabled

Metodyka BEM – najważniejsze zasady

  • Blok opisuje główne zasady panujące w komponencie (czcionka, tło etc.)
  • Element zawsze musi znajdować się wewnątrz bloku
  • Nie można zagnieżdżać klas w CSS
  • Elementy stylować można tylko po klasach

Jak BEM wpływa na aplikacje Ferryt?

Po zapoznaniu się z podstawami BEM możemy przejść do tego, jak wykorzystywana jest ta metoda na przykładzie platformy Ferryt – jest to platforma workflow.

Załączona grafika na górze obrazuje przykład kodu kontrolki „Link z Ikoną”. Możemy zauważyć, że Block w tym komponencie przyjmuje nazwę „nfepLink. Kolejno posiada on modyfikator „icon”, który jest uchwytem dla kodów JS. Schodząc wzrokiem niżej po kodzie widzimy pierwszy Element. Jako że mamy przejrzystość, wiemy, że określa on zawartość, która musi się utworzyć wewnątrz. Kolejne dwa Elementy określają już kontener do przechowywania tekstu („nfepLink__Text”), oraz obrazu („nfepLink__ImgContainer”), a modyfikatory określają pozycję gdzie ma się znaleźć obraz obok tekstu. Ostatnim elementem jest re-używalna klasa „nfepIcon”, która występuje w wielu różnych kontrolkach Ferryta wraz ze swoimi unikatowymi właściwościami.

Na pierwszy rzut oka widać, że w HTML-u występuje powtarzalność nazw klas z dopiskami „_ _”, lub też ” – -„. To one określają  kolejno co jest elementem, a co modyfikatorem. Drugą rzeczą, która jest zauważalna, jest fakt, że powtarzamy całe nazwy klas dla elementów i modyfikatorów. Wykonuje się to po to, żeby zawsze jedna klasa odpowiadała za jedną rzecz, a nie za całokształt.

Metodyka BEM – podsumowanie

Jak widać dzięki korzystaniu z BEM, udało się nam stworzyć prosty i przejrzysty kod bez dużego nakładu pracy. Jest on schludny oraz łatwy w czytaniu/analizie. Pozwala też nam na wielokrotne wykorzystanie kodu wewnątrz innych kontrolek (Przykład nfepIcon) oraz na zachowanie zasady DRY, polegającej na niekopiowaniu gotowych rozwiązań. Rekomendujemy metodykę BEM do wykorzystywania we własnych projektach, ponieważ jest prosta w opanowaniu oraz przyjemna w posługiwaniu.

Autor: Rafał Kamiński


Polecamy też: system BMP