Konwencja nazewnictwa klas stosowane w CSS – BEM

Kategoria wpisu Blogowanie, Frontend, Kurs CSS, Kursy Tagi: , , , on przez .


1 Gwizdka2 Gwizdki3 Gwizdki4 Gwizdki5 Gwizdki (1 głosów, średnia: 4,00 z 5)
Loading...

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. ?

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.

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.

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.

lub

Osoby korzystające z SCSS z pewnością widzą już tu bardzo prosty zapis.

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/