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:

[css].menu {}[/css]

Stylowanie elementu:

[css].menu__item {}[/css]

Stylowanie elementu z dodatkowymi atrybutami:

[css].menu__item–green {}[/css]

Stylowanie bloku z dodatkowymi atrybutami:

[css].menu–yellow {}[/css]

Przykład:

[html]
<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>

[/html]

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