BEM i konwencje nazewnictwa w CSS, z kreatorem nazw klas | We.Inc
Jak BEM nazywa bloki, elementy i modyfikatory, z kreatorem, który sprawdza Twoje nazwy klas. Porównanie BEM z klasami utility, CSS Modules i @scope.
BEM i konwencje nazewnictwa w CSS
BEM to skrót od Block, Element, Modifier (blok, element, modyfikator). Blok to samodzielny komponent, np. .card, element to część, która ma sens tylko w jego wnętrzu, zapisywana jako .card__title z dwoma podkreśleniami, a modyfikator to wariant zapisywany jako .card--featured z dwoma myślnikami. Modyfikatory dodaje się obok klasy bazowej, nigdy zamiast niej.
BEM w jednej tabeli
Część
Wzorzec
Przykład
Blok
.search-form
Element
block__element
.search-form__input
Modyfikator bloku
block--modifier
.search-form--compact
Modyfikator elementu
block__element--modifier
.search-form__button--disabled
Modyfikator klucz i wartość
block--key-value
.search-form--theme-dark
To nazewnictwo decyduje, czy projekt CSS pozostanie uporządkowany, czy powoli zmieni się w stos nadpisań. Ta strona wyjaśnia zasady BEM z oficjalnej strony BEM, sprawdza Twoje nazwy klas na bieżąco i porównuje BEM z innymi sposobami, którymi zespoły dziś chronią style przed kolizjami.
Wpisz w kreatorze nazwę bloku, a opcjonalnie także element i modyfikator.
Przeczytaj wygenerowane nazwy klas i HTML, który ich używa. Ostrzeżenia pojawiają się, gdy nazwa łamie zasadę BEM.
Skopiuj szkielet HTML i CSS do swojego komponentu.
Używaj w selektorach tylko jednej klasy. .card .card__title dodaje specyficzność, której BEM ma unikać.
Nigdy nie łącz elementów w łańcuch, jak .card__body__title. Każdy element należy bezpośrednio do bloku, niezależnie od tego, jak głęboko leży w HTML.
Zostawiaj klasę bazową obok modyfikatora: class="btn btn--large", a nie samo class="btn--large".
Nazywaj rzeczy według tego, czym są, a nie jak wyglądają. .alert--error przetrwa redesign, .alert--red nie.
Wybierz jedną konwencję na projekt i ją zapisz. Mieszanka stylów jest trudniejsza do czytania niż każdy pojedynczy styl.
Najczęściej zadawane pytania
Co oznacza skrót BEM?
Block, Element, Modifier, czyli blok, element, modyfikator. To metoda nazywania klas CSS, w której każdy selektor to jedna klasa, więc specyficzność pozostaje płaska, a po nazwie klasy widać, do którego komponentu należy.
Dlaczego BEM używa podwójnych podkreśleń i podwójnych myślników?
Pojedyncze myślniki są już używane wewnątrz nazw, jak w search-form. Podwojenie separatorów sprawia, że granica między blokiem, elementem i modyfikatorem jest jednoznaczna, więc .search-form__submit-button czyta się jako jeden blok i jeden element.
Czy BEM nadal ma sens z Tailwind lub CSS Modules?
Przy klasach utility rzadko piszesz nazwy klas komponentów, więc BEM ma mniejsze znaczenie. W CSS Modules narzędzie budujące samo izoluje nazwy, a zalecane są krótkie nazwy w camelCase. BEM nadal jest mocnym wyborem dla czystego CSS, Sass, motywów WordPress i design systemów współdzielonych między frameworkami.
Jak nazwać element wewnątrz elementu?
Przypisz go do bloku, a nie do elementu nadrzędnego. Tytuł w treści karty to .card__title, nawet gdy HTML zagnieżdża go w .card__body. Jeśli zagnieżdżona część jest wielokrotnego użytku sama w sobie, zrób z niej nowy blok.
Jaki problem rozwiązują konwencje nazewnictwa
Każda klasa CSS żyje w jednej globalnej przestrzeni nazw. Dwóch programistów piszących .title w różnych plikach w końcu nawzajem ostyluje sobie nagłówki, a typowa poprawka, czyli dłuższy selektor, rozpoczyna wyścig zbrojeń specyficzności.
Konwencja daje każdej klasie właściciela. Gdy .pricing-card__price źle się zachowuje, wiesz, który komponent otworzyć, i możesz usunąć komponent, wiedząc, że jego klasy nie są używane gdzie indziej.
Gdy bloki zawierają bloki
Blok może znajdować się wewnątrz innego bloku. Przycisk w karcie pozostaje .btn, a jeśli karta musi go ustawić, ten sam element może mieć obie klasy: class="btn card__action".
Takie połączenie zachowuje własne style przycisku do ponownego użycia, a karta kontroluje tylko układ, np. margines lub wyrównanie, przez swoją klasę elementu.
Natywne izolowanie w CSS nadrabia zaległości
@scope pozwala ograniczyć reguły do poddrzewa, na przykład do wszystkiego wewnątrz .card, ale nie wewnątrz zagnieżdżonego .card__media. W 2026 trafiło do Baseline jako nowo dostępne, więc sprawdź przeglądarki swoich odbiorców, zanim zaczniesz polegać tylko na nim.
Warstwy kaskady rozwiązują pokrewny problem: pozwalają uszeregować całe grupy stylów, więc reset lub motyw zewnętrzny nigdy nie przebije Twoich komponentów, niezależnie od tego, jak specyficzne ma selektory.
BEM w porównaniu z innymi podejściami
Sposoby na uniknięcie kolizji nazw klas
Podejście
Przykład
Kto pilnuje unikalności nazw
Najlepsze zastosowanie
BEM
.card__title--large
Ty, zgodnie z konwencją
Czysty CSS, Sass, motywy CMS
Klasy utility (Tailwind)
text-lg font-semibold
Nazwy komponentów niepotrzebne
Aplikacje budowane z komponentów
CSS Modules
styles.cardTitle
Narzędzie budujące przepisuje nazwy
React, Vue i podobne z bundlerem
@scope
@scope (.card) { h2 {} }
Przeglądarka ogranicza reguły
Nowsze przeglądarki, lekki markup
Pełny komponent w BEM
Blok karty z elementami i modyfikatorami
Każdy selektor to jedna klasa. Modyfikator featured zmienia obramowanie i pozwala jednemu elementowi reagować przez modyfikator bloku.
Typowe błędy w BEM
Źle i dobrze
Źle
Dobrze
Dlaczego
.card__body__title
.card__title
Elementy należą do bloku, nie do innych elementów
class="card--featured"
class="card card--featured"
Modyfikator potrzebuje klasy bazowej
.card .card__title
.card__title
Dodatkowe zagnieżdżenie zwiększa specyficzność
div.card__title
.card__title
Selektory BEM używają tylko nazw klas
.card--blue
.card--primary
Nazywaj znaczenie, nie kolor
Kreator nazw klas BEM
Wpisz blok, element i modyfikator, aby dostać nazwy klas oraz pasujący HTML i CSS, z ostrzeżeniami, gdy nazwa łamie zasadę.
Blok
Element (opcjonalnie)
Modyfikator (opcjonalnie)
Blok
Element
Modyfikator
{label}: nie wpisuj samodzielnie __ ani --, kreator dodaje separatory.
{label}: używaj małych liter łacińskich, cyfr i pojedynczych myślników.