by: Aurelia SypniewskaPosted on:

Konwencja nazewnictwa klas stosowane w CSS – BEM

Czas czytania: 2 minut

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: