Co to jest BEM i jak go stosować

BEM (Block – Element – Modifier) to jedna z najpopularniejszych metodologii nazywania klas CSS i organizowania stylów w dużych projektach. Jej celem jest pisanie kodu, który jest:

czytelny i zrozumiały na pierwszy rzut oka,
łatwy do utrzymania i rozwoju,
pozbawiony konfliktów klas i nadpisywania reguł,
przyjazny w pracy zespołowej.

Podstawowa koncepcja BEM

BEM dzieli strukturę komponentu na trzy poziomy:

Block – główny, niezależny komponent (np. card, menu)
Element – część wewnętrzna bloku, która nie ma sensu bez niego (np. card__title, menu__item)
Modifier – wariant stylu bloku lub elementu (np. card--highlighted, menu__item--active)

Przykład kodu HTML i CSS

<article class="card card--featured">
  <h2 class="card__title">Tytuł karty</h2>
  <p class="card__text">Treść karty z opisem.</p>
  <button class="card__button card__button--primary">Zobacz więcej</button>
</article>

.card {
  padding: 1rem;
  border: 1px solid #ccc;
  border-radius: 8px;
}

.card--featured {
  background-color: #f9f9f9;
  border-color: #0077cc;
}

.card__title {
  font-size: 1.2rem;
  font-weight: bold;
}

.card__text {
  color: #555;
}

.card__button {
  margin-top: 1rem;
}

.card__button--primary {
  background-color: #0077cc;
  color: white;
  border: none;
}

Dzięki tej strukturze możesz niezależnie rozwijać komponenty bez obawy, że zmienisz coś poza ich zakresem. Klasy są unikalne, opisowe i przewidywalne.

Zasady BEM

Elementy oddzielamy od bloku za pomocą podwójnego podkreślenia: block__element
Modyfikatory oddzielamy za pomocą dwóch minusów: block--modifier
Nie łączymy elementów z modyfikatorami bezpośrednio – element też może mieć swój modyfikator: block__element--modifier
Każdy komponent ma swoją przestrzeń nazw – nie trzeba unikać powtórzeń nazw elementów

Dobre praktyki

Używaj tylko małych liter i łączników (-) – np. card__title--highlighted
Nie styluj komponentów po tagach HTML (np. .card h2) – styluj tylko po klasach
Nie zagnieżdżaj klas BEM w klasach innych bloków
Nie nadpisuj stylów komponentów w zewnętrznych klasach
Trzymaj strukturę kodu zgodną z HTML – jeśli coś wygląda jak element logiczny, niech będzie osobną klasą

Dlaczego BEM działa?

BEM to nie framework – to konwencja. Jej siła polega na tym, że można ją stosować wszędzie: w małych projektach i dużych systemach. Dzięki spójnej nazwie klas i separacji logiki kodu, BEM pozwala zachować porządek nawet w ogromnych arkuszach stylów.

Ćwiczenie

Stwórz komponent „alertu” (komunikatu systemowego), np. ostrzeżenia lub powiadomienia, z użyciem BEM. Powinien zawierać:

główny blok alert,
tytuł komunikatu jako alert__title,
treść wiadomości jako alert__text,
przycisk zamknięcia jako alert__close,
modyfikatory, np. alert--error, alert--success.

Zastosuj te klasy zarówno w HTML, jak i w CSS. Jeśli chcesz, stwórz dwa warianty: „błąd” i „sukces”.

Wniosek

BEM to praktyczne podejście do organizowania stylów – oparte na jasnym nazewnictwie i jednoznacznej strukturze. Stosując je od początku, unikasz chaosu, a kod staje się czytelny zarówno dla Ciebie, jak i dla każdego innego programisty, który go później zobaczy.

Previous Zagadnienie

Back to Zagadnienie

Next Temat