Metodologia BEM – wszystko, co trzeba o niej wiedzie膰

Front-end 18 pa藕dziernika 2021

W programowaniu dobrze jest stosowa膰 si臋 do przyj臋tych norm, aby nasz kod by艂 艂atwejszy w zrozumieniu przez innych deweloper贸w i znacznie bardziej przemy艣lany - w ko艅cu je艣li dana metodologia powsta艂a, to bardzo cz臋sto oznacza, 偶e kto艣 wymy艣li艂 ju偶 i sprawdzi艂 w boju to ko艂o i my nie musimy robi膰 tego na nowo.

I tak jak HTML ma znaczniki semantyczne, j臋zyki programowania - wzorce projektowe i frameworki, tak CSS posiada konkretne metodologie.

I tak, najpopularniejsz膮 i przez wiele os贸b uwa偶an膮 za najbardziej intuicyjn膮 z nich jest BEM (Block-Element-Modifier), kt贸ra to skrad艂a serca deweloper贸w przez swoj膮 prostot臋, 艂atwo艣膰 w wykorzystywaniu szczeg贸lnie przy pisaniu w preprocesorach takich jak SCSS, Sass czy Less i przede wszystkim - bycie wybawieniem w przypadku projekt贸w du偶ych i rozwijanych przez d艂u偶szy czas.

I skoro jest taka popularna i przydatna, to powiedzmy o niej kilka zda艅!

W takim razie o co chodzi w tej technice?

W skr贸cie mamy 3 elementy. Konkretny blok (na przyk艂ad konkretn膮聽sekcj臋 lub komponent na stronie), sk艂ada si臋 on z element贸w聽- mo偶e mie膰 w sobie rzeczy takie jak nag艂贸wek, zdj臋cia, przyciski, teksty i wiele wiele innych - to wszystko mo偶e by膰 elementami konkretnego bloku.

One wszystkie zwykle b臋d膮 si臋 powtarza膰 w obr臋bie witryny (w ko艅cu s艂abym pomys艂em jest, aby np. ka偶dy przycisk na stronie by艂 zupe艂nie inny. Gdy jednak chcemy wyr贸偶ni膰 dany element, to pos艂u偶ymy si臋 trzeci膮 sk艂adow膮 naszej metodologi, jak膮 jest modyfikator, kt贸ry s艂u偶y do zmodyfikowania tego powtarzalnego elementu (na przyk艂ad gdy jeden przycisk ma nie by膰 bia艂y, a zielony).

W porz膮dku. Jak w takim razie si臋 zapisuje w ramach klas w CSSie?

W przypadku blok贸w (lub inaczej komponent贸w) jest najpro艣ciej:

.blok
.blok-skladajacy-sie-z-kilku-wyrazow

Jak wida膰 zapisujemy je tak jak zwykle deklaruje si臋 klasy bez narzuconej metodologi - konkretnym wyrazem lub kilkoma, oddzielonymi pojedynczymi my艣lnikami.

Z kolei element zapisujemy jako blok oraz nazwa elementu rozdzielone dwoma znakami podkre艣lenia (__). W ten oto spos贸b:

.blok__element

Co warto od razu podkre艣li膰 i do czego wr贸c臋 m贸wi膮c p贸藕niej o kilku b艂臋dach, kt贸rych warto unika膰 podczas pisania w ramach tej metodologii, to to, 偶e element nie powinien mie膰 swojego elementu, a zamiast tego by膰 bezpo艣redni膮 sk艂adow膮 konkretnego bloku.

Dzi臋ki temu znacznie 艂atwiej dzieli si臋 poszczeg贸lne elementy na stronie na ma艂e i 艂atwe w wielokrotnym wykorzystywaniu komponenty, co sprawia, 偶e niepowi膮zane bezpo艣rednio cz臋艣ci naszego kodu nie wp艂ywaj膮 na siebie nawzajem, oraz eliminuje powt贸rzenia.

I jak wspomnia艂em - s膮 jeszcze modyfikatory. Zapisujemy je podobnie jak elementy, tylko 偶e zamiast znak贸w podkre艣lenia, u偶ywamy my艣lnik贸w, w ten oto spos贸b:

.blok--modyfikator
.blok__element--modyfikator

Jak wida膰 mo偶emy modyfikowa膰 ca艂e bloki jak i pojedyncze elementy. Co jeszcze wa偶ne to modyfikator musi zawsze i艣膰 w parze z oryginalnym elementem:

// Tak jest dobrze
.blog__element .blok__element--modyfikator

// Tak niekoniecznie
.blok__element--modyfikator

Mo偶e sp贸jrzmy na konkretny przyk艂ad, w kt贸rym stworzymy prosty element banera na stronie:

See the Pen BEM w praktyce by Robert Orli艅ski (@ROrlilnski) on CodePen.

Dobrze pokazuje on spos贸b u偶ycia wszystkich trzech cz臋艣ci, jakie zawiera w sobie metodologia BEM.

Jakich b艂臋d贸w unika膰, pisz膮c kod wg. metodologii BEM?

1. Nie zagnie偶d偶ajmy element贸w

Element nie powinien mie膰 swojego elementu. Nawi膮zuj膮c do poprzedniego przyk艂adu co艣 takiego nie jest sytuacj膮, kt贸r膮 chcemy widzie膰 w naszym kodzie:

See the Pen Nie zagnie偶d偶ajmy element贸w by Robert Orli艅ski (@ROrlilnski) on CodePen.

Tak jak wspomina艂em par臋 paragraf贸w temu - je艣li w pe艂ni przestrzegamy tej zasady, to pisanie niewchodz膮cego sobie w drog臋, 艂atwego w ponownym u偶ywaniu i lepiej podzielonego na komponenty, jest o niebo 艂atwiejsze.

2. Stylujmy po klasach - w przypadku wszystkich element贸w

Jedn膮 z zasad tej metodologii m贸wi nam aby do ka偶dego elementu na stronie odwo艂ywa膰 si臋 po klasach, a nie po ID lub selektorach. Dlatego zn贸w powo艂uj膮c si臋 na ten sam przyk艂ad:

See the Pen U偶ywajmy klasy dla wszystkich element贸w by Robert Orli艅ski (@ROrlilnski) on CodePen.

...co艣 takiego nie jest efektem, kt贸ry chcieliby艣my osi膮gn膮膰. Wida膰 zreszt膮, 偶e stylowanie w ten spos贸b jest lekko pokr臋cone ju偶 przy tak ma艂ym bloku.

3. Modyfikatory maj膮 modyfikowa膰 elementy, a nie je zast臋powa膰

Ostatni膮 kwesti膮 jak膮 chcia艂bym poruszy膰 to sprawa modyfikator贸w. Chodzi dok艂adnie o tak膮 sytuacj臋 wspomnian膮 przy okazji t艂umaczenia tego konceptu wcze艣niej w artykule:

See the Pen Modyfikatory modyfikuj膮 elementy, a nie je zast臋puj膮 by Robert Orli艅ski (@ROrlilnski) on CodePen.

Jak wida膰 niepotrzebnie stworzyli艣my kilka dodatkowych lini styluj膮c od nowa przezroczysty przycisk zamiast tylko go zmodyfikowa膰.

Podsumowanie

I tak oto dotarli艣my do ko艅ca tego artyku艂u, w kt贸rym chcia艂em wyt艂umaczy膰 Ci czym jest metodologia BEM oraz jakie s膮 jej og贸lne zasady.

Mam nadziej臋, 偶e si臋 to w jak najwi臋kszym stopniu uda艂o i c贸偶 - 偶ycz臋 Ci cudownego pisania CSS贸w wg jej zasad!

Komentarze

Mo偶e dodasz co艣 od siebie?