Konwencja nazewnictwa klas stosowane w CSS – BEM

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.

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