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 鈥淏lock Element Modifier鈥. Metoda ta jest stosunkowo prosta i jak sama nazwa sugeruje obejmujepodej艣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/

Dodaj komentarz

Tw贸j adres e-mail nie zostanie opublikowany. Wymagane pola s膮 oznaczone *

*Wyra偶am zgod臋 na przechowywanie i przetwarzanie moich danych na potrzeby umieszczenia mojego komentarza.
*W przypadku gdy tre艣膰 komentarza narusza prawo Polskie i dobro oraz uczucia innych os贸b Administrator, zachowuje prawo nie publikowania go