BEM (Block – Element – Modifier) je konvencija imenovanja za nazive klasa u HTML-u i CSS-u. Pomaže pri pisanje čistog CSS-a slijedeći neka jednostavna pravila.
Block (blok)
Funkcionalno neovisna komponenta stranice koja se može ponovno koristiti, npr:
- header
- container
- menu
- checkbox
- input
- button
U HTML-u blokovi su predstavljeni atributom klase.
Element
Dio bloka koji nema samostalno značenje i semantički je vezan za svoj blok, npr:
- header title
- menu item
- checkbox caption
- list item
Modifier
Koriste se za promjenu izgleda ili ponašanja bloka ili elementa, npr:
- disabled
- highlighted
- checked
- fixed
- size big
- color yellow
Označavanje klasa po BEM metodologiji
Blok je komponente najviše razine, na primjer gumb: .btn { }. O ovom bloku treba razmišljati kao o roditelju (parent).
Child items ili elementi mogu se smjestiti unutar bloka i označeni su s 2 donje crtice __ (2 x underscore) iza naziva bloka npr. .btn__price { }.
Modifikatori mogu manipulirati blokom tako da možemo stilizirati određenu komponentu bez nanošenja promjena na potpuno nepovezan modul. To se radi dodavanjem 2 crtice — (2 x hyphens) imenu bloka npr. btn–orange.
/* Blok komponenta */
.btn {}
/* Element koji ovisi o komponenti */
.btn__price {}
/* Modifikator koji mijenja stil bloka */
.btn--orange {}
.btn--big {}Prednosti
Modularnost
Stilovi blokova nikada ne ovise o drugim elementima na stranici, tako da nema problema s kaskadama u CSS-u. Također je moguće iskoristiti blokove iz jednog projekata za drugi.
Ponovno korištenje
Sastavljanje neovisnih blokova i njihova ponovna inteligentna uporaba smanjuje količinu CSS koda.
Struktura
BEM metodologija daje CSS kodu čvrstu strukturu koja ostaje jednostavna i lako razumljiva čak i nekom tko nije pisao taj kod.