Każdy developer budując stronę internetową wykorzystuje jakąś metodę nazewnictwa klas CSS nawet jeśli nie do końca jest tego świadomy. W przypadku korzystania z bibliotek CSS jest to główne metodyka narzucona przez autora skryptu. A developer jedynie wpasowuje się w nią tak by osiągnąć porządny efekt. ?
Co znajdziesz w tym wpisie
Czym są konwencje, metodyki CSS?
Powinniście się już właściwie domyślać czym one właściwie są. Metodyki CSS to sposoby nadawania nazw elementom naszej strony. W większości przypadków standaryzowany – tworzony według określonych zasad. W taki sposób by w przyszłości każdy mógł swobodnie edytować stronę i nie pogubić się w jej strukturze.
Aktualnie jedną z popularniejszych jest właśnie BEM.
Konwencja BEM – „Blok Element Modyfikator”
Nazwa BEM to skrót od angielskich słów “Block Element Modifier”. Metoda ta jest stosunkowo prosta i jak sama nazwa sugeruje obejmuje podejście do tworzenia kodu CSS modułowego. Dzielimy w niej elementy na 3 typy:
- bloki – zaliczyć do nich możemy menu strony, formularze (np. wyszukiwarka)
- elementy – poszczególne elementy mieszczące się bloku takie jak przyciski/linki w menu, pola typu input (określające cechy wspólne elementów)
- modyfikatory – warianty dla konkretnych elementów: inny wygląd dla przycisku akceptuj a inny dla anuluj
Nazewnictwo elementów w metodyce BEM
Pierwszym i najważniejszym elementem jest blok. Stanowi on kontener okalający dany „moduł” na stronie. Przykładowo takim blokiem jest menu strony. Zgodnie więc z metodyką nazwa jego klasy powinna być prosta i w miarę intuicyjna np.
.menu {}Nazwa klasy elementu będzie bezpośrednio związana z blokiem, w którym się znajduje. A mianowicie początek będzie taki sam tyle że z dwoma podkreśleniami (__) a za nimi nazwą jaką chcemy nadać elementowi np.
.menu__element {}Nie zdziwi was z pewnością wiadomość, że modyfikator będzie klasą składającą się z nazwy elementu oraz z dwóch podkreślników lub myślników.
.menu__element--modyfikator {}
lub
.menu--modyfikator {}Osoby korzystające z SCSS z pewnością widzą już tu bardzo prosty zapis.
.menu {
/* własności CSS */
&__element{
/* własności CSS */
&--modyfikator{
/* własności CSS */
}
}
}Jak rozróżnić blok od elementu
Czasami będzie nam trudno ustalić czy dany element jest już blokiem a może nadal elementem. Jeżeli zdarzy nam się taka sytuacja warto się zastanowić co to za kod i czy np.
- będzie również używany w innych miejscach na stronie, a jego wygląd ma być taki sam lub zbliżony nieważnie gdzie występuje. W takim przypadku powiliśmy uznać go za blok.
- z kolei jeżeli kod będzie stanowił integralny element swojego rodzica, będzie od niego zależny to będzie on elementem.
Co jeszcze musimy wiedzieć by korzystać z BEM
To oczywiście nie wszystko. Jest jeszcze kilka innych regół jakie trzeba przestrzegać stosując tą metodę:
- korzystamy tylko z klas bez selektorów ID
- elementy powinny posiadać unikalne nazwy w obrębie bloku
- nie stosujemy do stylowania selektorów HTML takich jak: nav, footer itp.
- nie korzystamy z selektorów potomnych / kaskadowości np.
- nav > ul {},
- .menu .menu__text{}
Podsumowanie
Jak widać metoda ta nie jest trudna. Prawdopodobnie to jest też powodem jej całkiem sporej popularności. Dużo więcej na jej temat dowiedzieć się możecie z oficjalnej strony projektu.
źródła:
https://psd2css.pl/blog/metodologia-bem-dlaczego-warto-pisac-kod-css-modulowo
https://www.nafrontendzie.pl/metodyki-css-2-bem
https://dailyweb.pl/nauka-bem-w-5-minut/
W branży IT jestem już od 2007 roku. W tym czasie zajmowałam się głównie tematyką pozycjonowania i budowy stron internetowych. Hobbistycznie zajmuje się fotografią, podróżami (głównie tymi mikro). Interesuje się mitologią (Nordycką, Grecką i Rzymską) i historią.