Metodologia BEM

Co to jest Metodologia BEM?

W przypadku mniejszych stron typu Landing Page sposób porządkowania stylów nie stanowi dużego problemu. Style nie są na tyle rozbudowane, aby zaburzyło to czytelność czy wydajność – chociaż i z takimi przypadkami się spotykałem np. stosowanie klas typu „niewiem” czy „dupa” – a jakie są wasze doświadczenia?

Jeśli jednak chodzi o większe, bardziej złożone projekty, sposób organizacji kodu jest kluczem do wydajności na co najmniej trzy sposoby: wpływa na to, ile czasu zajmuje napisanie kodu, ile tego kodu będzie trzeba napisać i ile będzie trzeba potrzeba czasu, aby kod został załadowany przez przeglądarkę.

Stosowanie ogólnie przyjętych norm staje się szczególnie ważne, gdy pracujesz z zespołami twórców tematów i gdy wymagana jest wysoka wydajność.

Istnieje wiele metodologii mających na celu zmniejszenie wielkości CSS, zorganizowanie współpracy między programistami czy utrzymanie dużych baz kodów CSS. Nie jest tajemnicą, że zdecydowanie najpopularniejszą z nich jest BEM (Block-Element-Modifier). Jest to oczywiste w przypadku dużych projektów, takich jak Facebook, AirBnB czy chociażby Booking, ale inne projekty również coraz częściej stają się częścią „Huge CSS”.

BEM, czyli Blok, Element i Modyfikator

Blok

Przykłady: header, menu, container, footer, sidebar etc.

Element

Przykłady: menu item, header title, list item etc.

Modyfikator

Przykłady: checked, fixed, active, disabled etc.

Code review – Przykłady

Poprawnie zakodowana struktura HTML powinna przyjąć następującą postać

HTML

<div class="footer">
	Footer
</div>
<button class="footer footer__widget--primary">
	Footer Widget Primary
</button>
<button class="footer footer__widget--secondary">
	Footer Widget Secondary
</button>
CSS

.footer{
     display: block;
     margin: 0 auto;
     width: 1200px;
}

.footer__widget--primary {
     color: #ffa
}

.footer__widget--secondary{
     color: #fab
}

Korzyści stosowania Metodologii BEM

  • style nie zależą do innych elementów na stronie, zatem nie ma problemów z kaskadowością,
  • prostsze utrzymanie kodu i ponowne użycie ich w innym projekcie, bo przecież ile razy przyszło Ci przejąć po kimś projekt? Dużo, prawda?
  • prostota – dzięki standaryzacji kod jest prostszy do zrozumienia