Nauka BEM w 5 minut!
Artykuł ten będzie ekspresowym kursem przydatnego i popularnego w ostatnim czasie BEM'a. Jeżeli właśnie pijesz poranną kawę, to przeczytaj artykuł i naucz się korzystać z metodologii BEM. Czym tak właściwie jest BEM? Jest to określone nazewnictwo klas CSS tak aby były czytelne i zrozumiałe dla każdego pracującego z kodem.
Zaczynajmy
Metodologia BEM czyli Block Element Modifier dzieli komponenty strony na 3 istotne podgrupy zawarte już w samej nazwie.
Block
- Większe elementy mające na celu pełnienie danej funkcji np. header, container, menu, checkbox, input.
Element
- Elementy zawarte w poniższych blokach takie jak przyciski menu, checkboxy. Nazewnictwo: menu item, list item, checkbox caption, header title.
Modifier
- Czyli modyfikatory elementów np. disabled, highlighted, checked, fixed, size big, color green.
Poprawne nazewnictwo
W przypadku stylowania bloku:
.menu {}Stylowanie elementu:
.menu__item {}Stylowanie elementu z dodatkowymi atrybutami:
.menu__item--green {}Stylowanie bloku z dodatkowymi atrybutami:
.menu--yellow {}Przykład:
<div class="menu menu--small"> <div class="menu__item menu__item--green">Item</div> </div> <div class="menu menu--big"> <div class="menu__item menu__item--yellow">Item2</div> </div>
Powyższy przykład ilustruje dziedziczenie właściwości klasy "menu" w obu przypadkach oraz dodatnia dodatkowych atrybutów za pomocą klasy "menu--small" oraz "menu--big". Dodatkowo elementy menu "menu__item" dziedziczą wspólne atrybuty właśnie dzięki tej klasie oraz posiadają własne za sprawą selektorów klas "menu__item--green" oraz "menu__item--yellow".
Kilka wskazówek na koniec
Do poprawnego stosowania metodologii BEM konieczne jest stosowanie również poniższych instrukcji.
-Unikalna nazwa dla każdego elementu!
-Nie stosujemy selektorów HTML do stylowania takich jak: nav, footer itp.
-Nie używamy kaskadowości np. nav > ul
-Nie używamy selektorów ID.
Pełną dokumentację znajdziecie na oficjalnej stronie BEMa, na którą serdecznie zapraszam.
Autor: Radosław Bogusławski