BEM: nazewnictwo bloków, elementów i modyfikatorów
Nauczy się Pan/Pani stosować metodologię Block-Element-Modifier do tworzenia przewidywalnych, wielokrotnego użytku nazw klas.
BEM: nazewnictwo bloków, elementów i modyfikatorów to bezpłatna lekcja CSS Academy na CoddyKit. To lekcja 2 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 CSS Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs CSS Academy zawiera 4 lekcji w sumie.
Czym jest BEM?
BEM (Block–Element–Modifier) to konwencja nazewnictwa, która tworzy opisowe nazwy klas. Dzięki niej komponenty CSS są przewidywalne i samoopisujące.
Blok
Blok to samodzielny, znaczący komponent interfejsu użytkownika, który może istnieć niezależnie. Jest to główna klasa komponentu.
<div class="card">Card block</div>
<nav class="nav">Nav block</nav>
<button class="button">Button block</button>
<form class="search-form">Search form block</form>Element
Element jest elementem potomnym bloku, który poza nim nie ma znaczenia. Elementy używają podwójnego podkreślenia: .block__element.
<div class="card">
<div class="card__image">Image</div>
<div class="card__body">
<h2 class="card__title">Title</h2>
</div>
</div>
<nav class="nav">
<div class="nav__item"><a class="nav__link" href="#">Link</a></div>
</nav>Modyfikator
Modyfikator to wariant lub stan bloku albo elementu. Modyfikatory używają podwójnego łącznika: .block--modifier.
<button class="button button--primary">Primary</button>
<button class="button button--large">Large</button>
<div class="card card--featured">Featured Card</div>
<nav class="nav">
<div class="nav__item nav__item--active">Active Item</div>
</nav>Kompletny przykład BEM
Komponent karty z nazewnictwem BEM:
<div class="card card--featured">
<div class="card__image" role="img" aria-label="Card image"></div>
<div class="card__body">
<h2 class="card__title">Title</h2>
<p class="card__text">Content</p>
<a class="button button--primary card__action" href="#">Read More</a>
</div>
</div>Struktura CSS BEM
Odpowiadający jej CSS karty BEM:
<div class="card card--featured">
<div class="card__image" role="img" aria-label="Card image"></div>
<div class="card__body">
<h2 class="card__title">Title</h2>
<p class="card__text">Content</p>
<a class="button card__action" href="#">Read More</a>
</div>
</div>Zaleta BEM: specyficzność
Klasy BEM są zawsze pojedynczymi klasami (specyficzność 0,1,0). Żaden selektor nie jest bardziej specyficzny od innego, więc nadpisywanie jest proste — wystarczy dodać właściwą klasę modyfikatora.
Typowe błędy w BEM
Należy unikać następujących pułapek BEM:
- Elementy wielopoziomowe:
.card__body__title— należy je spłaszczyć do.card__title - Elementy znajdujące się w kodzie HTML poza swoim blokiem
- Używanie selektorów elementów, takich jak
.nav__link a— powoduje niepotrzebne zwiększenie specyficzności
BEM i niestandardowe właściwości CSS
BEM i zmienne CSS dobrze ze sobą współpracują. Należy definiować tokeny na poziomie bloku, które modyfikatory będą nadpisywać:
<button class="button">Default</button>
<button class="button button--danger">Danger</button>Kiedy nie używać BEM
BEM jest rozwlekły i nie sprawdza się najlepiej w przypadku klas narzędziowych ani stylów jednorazowych. Frameworki utility-first, takie jak Tailwind, całkowicie zastępują BEM. BEM warto stosować w niestandardowych bibliotekach komponentów, w których znaczenie semantycznych nazw ma znaczenie.
BEM w praktyce
Wiele systemów projektowych używa wariantów BEM lub podobnych schematów nazewnictwa. Konkretna składnia ma mniejsze znaczenie niż spójna zasada: blok → element → modyfikator, bez głębokiego zagnieżdżania i z płaską specyficznością.
Szybkie sprawdzenie
W BEM która składnia reprezentuje element o nazwie „title” wewnątrz bloku „card”?
Podsumowanie
BEM używa nazewnictwa Block, Element i Modifier: .block__element--modifier. Wszystkie klasy są pojedynczymi klasami, co zapewnia płaską i równą specyficzność. Elementy (__) należą do swoich bloków. Modyfikatory (--) tworzą warianty. Należy unikać głębokiego zagnieżdżania, takiego jak .card__body__title — zamiast tego należy użyć płaskiej nazwy .card__title.
Często zadawane pytania
Czy lekcja „BEM: nazewnictwo bloków, elementów i modyfikatorów” jest bezpłatna?
Tak — pełny tekst „BEM: nazewnictwo bloków, elementów i modyfikatorów” 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 CSS Academy, przejdź na CoddyKit PRO. Kurs CSS Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „BEM: nazewnictwo bloków, elementów i modyfikatorów”?
Nauczy się Pan/Pani stosować metodologię Block-Element-Modifier do tworzenia przewidywalnych, wielokrotnego użytku nazw klas. Ćwiczysz CSS 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ąć CSS Academy?
Nie wymagamy żadnego doświadczenia. CSS 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 2 z 4.
Ile czasu zajmuje lekcja „BEM: nazewnictwo bloków, elementów i modyfikatorów”?
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 CSS Academy?
Tak. Każda lekcja CSS 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
- Dlaczego architektura CSS ma znaczenie
- BEM: nazewnictwo bloków, elementów i modyfikatorów
- Organizacja plików: ITCSS i wzorzec 7-1
- Unikanie wojen specyficzności