Metodologia BEM: Block, Element, Modifier
Proszę nazywać klasy CSS według wzorca Block__Element--Modifier, aby tworzyć samodokumentujące się, o niskiej specyficzności i wielokrotnego użytku style komponentów.
Metodologia BEM: Block, Element, Modifier to bezpłatna lekcja Frontend Academy na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Frontend Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Frontend Academy zawiera 4 lekcji w sumie.
Czym jest BEM
BEM (Block, Element, Modifier) to konwencja nazewnictwa CSS, która sprawia, że style są przewidywalne, wielokrotnego użytku i nie powodują konfliktów. Dzięki kodowaniu struktury komponentu w nazwach klas eliminuje wojny o specyficzność i przypadkowe kolizje stylów.
Bloki — samodzielne komponenty
Blok to niezależny, wielokrotnego użytku komponent, na przykład card, button lub nav. Nazwa klasy jest nazwą bloku zapisaną małymi literami, z użyciem łączników.
<div class="card">...</div>
<button class="btn">...</button>
<nav class="main-nav">...</nav>Elementy — części bloku
Element to część bloku, która nie ma znaczenia samodzielnie. Należy używać podwójnych podkreśleń: block__element.
<div class="card">
<img class="card__image" src="..." alt="...">
<div class="card__body">
<h2 class="card__title">Title</h2>
<p class="card__description">...</p>
</div>
<footer class="card__footer">
<a class="card__link" href="...">Read more</a>
</footer>
</div>Modyfikatory — warianty i stany
Modyfikator zmienia wygląd lub zachowanie bloku albo elementu. Należy używać podwójnych łączników: block--modifier lub block__element--modifier.
<button class="btn">Default</button>
<button class="btn btn--primary">Primary</button>
<button class="btn btn--danger btn--large">Large Danger</button>
<div class="card card--featured">...</div>
<nav class="main-nav main-nav--collapsed">...</nav>Zasady BEM dla CSS
Klasy BEM mają niską i jednakową specyficzność (po jednej klasie w każdym selektorze). Dzięki temu style można łatwo nadpisywać. Nie należy używać identyfikatorów ani zagnieżdżonych selektorów elementów — zwiększają one specyficzność w nieprzewidywalny sposób.
/* Good BEM CSS */
.card { /* ... */ }
.card__title { /* ... */ }
.card--featured { /* ... */ }
/* Avoid */
.card h2 { /* targets any h2 in .card — too broad */ }
#featured-card { /* high specificity — hard to override */ }BEM z Sass
Selektor rodzica Sass & sprawia, że pisanie BEM jest mniej rozwlekłe. Skompilowany CSS jest identyczny jak w przypadku zwykłego BEM.
.card {
padding: 16px;
&__title {
font-size: 1.25rem;
font-weight: 600;
}
&__body {
color: var(--color-text-secondary);
}
&--featured {
border: 2px solid var(--color-brand);
}
}Kiedy utworzyć nowy blok
Należy utworzyć nowy blok, gdy komponent może działać samodzielnie i być ponownie używany w różnych kontekstach. Element należy utworzyć wtedy, gdy dana część ma sens wyłącznie wewnątrz konkretnego bloku.
BEM unika zagnieżdżania
BEM zniechęca do głębokiego zagnieżdżania w HTML i CSS. Element znajdujący się wewnątrz innego elementu nadal jest zapisywany jako block__element, a nie block__element__subelement.
<!-- Correct: -->
<div class="card">
<div class="card__meta">
<time class="card__date">Jan 1</time>
</div>
</div>
<!-- Wrong: -->
<div class="card">
<div class="card__meta">
<time class="card__meta__date">Jan 1</time> <!-- 3 levels = wrong -->
</div>
</div>BEM i JavaScript
Do hooków behawioralnych należy używać osobnej klasy przeznaczonej dla JS z prefiksem js-. Oddziela to style od skryptów — zmiana nazwy klasy BEM nie spowoduje zepsucia działania JavaScriptu.
<button class="btn btn--primary js-submit">Submit</button>
// JS: select by js- class
document.querySelector('.js-submit').addEventListener('click', handleSubmit);Mieszanie bloków BEM
Jeden element może mieć wiele klas bloków, aby umożliwić stylowanie zależne od kontekstu bez wzajemnego uzależniania bloków.
<button class="btn btn--primary form__submit">Submit</button>Ograniczenia BEM
Nazwy klas mogą stać się długie. BEM najlepiej sprawdza się w dużych zespołach i systemach projektowych, w których ważna jest globalna spójność stylów. W przypadku frameworków komponentowych (React/Vue) z zakresowo ograniczonymi stylami korzyści z przestrzeni nazw BEM są mniej istotne.
Szybkie sprawdzenie
Co w BEM oznacza card__title--truncated?
Podsumowanie: BEM
Blok: samodzielny komponent. Element (podwójne podkreślenie __): część bloku. Modyfikator (podwójny łącznik --): wariant lub stan. Niska, jednakowa specyficzność. Należy unikać selektorów identyfikatorów i głębokiego zagnieżdżania. Do hooków JavaScriptu należy używać prefiksu js-. Sass & sprawia, że BEM jest mniej rozwlekłe. BEM doskonale sprawdza się w dużych zespołach i systemach projektowych.
Często zadawane pytania
Czy lekcja „Metodologia BEM: Block, Element, Modifier” jest bezpłatna?
Tak — pełny tekst „Metodologia BEM: Block, Element, Modifier” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Frontend Academy, przejdź na CoddyKit PRO. Kurs Frontend Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Metodologia BEM: Block, Element, Modifier”?
Proszę nazywać klasy CSS według wzorca Block__Element--Modifier, aby tworzyć samodokumentujące się, o niskiej specyficzności i wielokrotnego użytku style komponentów. Ćwiczysz Frontend Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Frontend Academy?
Nie wymagamy żadnego doświadczenia. Frontend Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.
Ile czasu zajmuje lekcja „Metodologia BEM: Block, Element, Modifier”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Frontend Academy?
Tak. Każda lekcja Frontend Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Metodologia BEM: Block, Element, Modifier
- CSS Modules: ograniczone zakresowo nazwy klas
- CSS-in-JS: Styled-components i Emotion
- Tailwind CSS: podejście utility-first