Czym jest dla mnie BEM?

• 3 minuty

Dziś miałem przyjemność rozmawiania z kilkoma osobami na temat techniki definiowania klas w CSS. Rozważanie polegało na wyborze, który sposób na tworzenie ich jest lepszy.

Do wyboru były dwa:

Który jest lepszy według mnie?

Baner promujący artykuł

Jak wygląda sposób “na rympał”?

Ten styl tworzenia klas CSS polega na tzw. zasadach w stylu “tak mi się wydaje”. Nie ma tutaj żadnej konwencji nazewnictwa ani specjalnie żadnych reguł. W zespole projektowym, który przyjął taką strategię tworzenie layoutów może okazać się nie lada wyzwaniem z tego powodu, że każdy pisze po swojemu, dlatego też developer nie czuje większej potrzeby oceniania kodu CSS kolegi z zespołu.

Wskazówka

dash-case (kebab-case) to “jedyna” słuszna konwencja nazywania elementów w CSS. Przykład: menuItemActive → menu-item-active

Tworzenie layoutów w ten sposób ma swoje wady i zalety. Przedstawię Ci te, które pojawiły się w mojej głowie podczas dzisiejszych pogawędek.

Zalety

  • pełna dowolność w nazewnictwie

Wady

  • nieskończona ilość zagłębień w preprocesorach, np. SASS
  • brak konwencji nazewnictwa klas (menu-active-item vs menu-item-active)
  • można się zgubić w kodzie dużego projektu



Dlaczego kod CSS oraz HTML jest pomijany podczas Code Review?



Zasady w CSS?

Oh tak! To nie jest tak, że ten język jest na tyle nieważny, że nie warto stosować, żadnych zasad. W komplikowanych layotowo aplikacjach liczba kodu w plikach ze stylami jest ogromna.

Jak można zapanować na tym chaosem który powstaje w kodzie? Odpowiedź jest prosta. Można skorzystać w dowolnej techniki, np. BEM.

Co to jest BEM?

Technika to metodyka, która charakteryzuje się tym trzema warstwami. Jej nazwa pochodzi od słów: Block, Element, Modifier.

  • Block - dla mnie jest to komponent - taki byt, który można wydzielić do osobnego pliku i używać w wielu miejscach. Przykład: .person
  • Element - to dziecko komponentu. Przykład: .person__title
  • Modifier - to po prostu cecha elementu, informująca o jego obecnym stanie. Przykład: .person__title--active

Zalety

  • ograniczona ilość zagłębień w preprocesorach, np. SASS - kod staje się dłuższy zamiast szerszy
  • istnieje konwencja nazewnictwa klas
  • rzadko kiedy można pogubić się w kodzie dużego projektu
  • kiedy spoglądam na klasę to wiem - na podstawie jej budowy - z czym mam do czynienia
  • zapewniony namespacing, tj. każdy “block” jest osobnym komponentem chyba, że używasz Angular-a, to nie jest to duży plus ze względu na Components Styles

Wady

  • nie ma pełnej dowolność w nazewnictwie
  • liczba wartości w atrybucie class w elementach HTML jest dosyć duża chyba, że używasz Angular-a i pluginu angular-bem, który skróca zapis

•

Nie samym BEMem żyje człowiek!

Nie jestem fanem BEMa. Szczerze, to napisałem w nim jeden projekt (góra dwa). Zachęcam jednak do wykorzystania go, aby na własnej skórze przekonać się jak przedstawia się tworzenie layoutu.

Przy nazewnictwie masz zestaw kilku reguł, które musisz przestrzegać. Czasami zasady tylko przeszkadzają w wytwarzaniu oprogramowanie, ale w większości dają on więcej plusów. Ważne jest, aby wybrać sobie dowolne reguły i ich przestrzegać, co by się nie zaskakiwać 😄

Inne znane metodyki wspomagające tworzenie CSS:

  • OOCSS - Object Oriented CSS
  • ACSS - Atomic CSS
  • oCSS - organic Cascade Style Sheet
  • SMACSS - Scalable and Modular Architecture for CSS