Front-end

BEM: Jak skutecznie zorganizować kod CSS

CSS jest zdecydowanie kluczowym elementem naszych projektów. Jednak wraz z rosnącym rozpoznawalnością, zwiększa się jego złożoność, co może prowadzić do chaosu. Narzędziem, które umożliwia efektywne zarządzanie kodem CSS, jest BEM - czyli Block, Element, Modifier. Ten artykuł to kompletny przewodnik, który pomoże zrozumieć i zastosować BEM w swoich projektach.

Tomasz Kozon - CEO Boring Owl

Tomasz Kozon

CEO

25 mar 2024

BEM (Block, Element, Modifier) to popularna metoda organizacji kodu CSS, która pochodzi od rosyjskiego giganta internetowego, Yandex. Jej fundamentalnym przesłaniem jest zachowanie struktury kodu, poprawa jego czytelności oraz redukcja kompleksowości przy jednoczesnym zwiększeniu efektywności programistów. Pomocna jest w szczególny sposób w dużych, rozległych projektach, gdzie zwiększenie złożoności kodu może prowadzić do problemów z jego utrzymaniem. BEM, przynosząc ściśle zdefiniowane zasady dotyczące nazewnictwa i segregacji kodu, tworzy silne fundamenty dla skutecznego zarządzania skomplikowanymi stylami CSS.

 

Powiązane case studies

Elementy BEM: Bloki, Elementy i Modyfikatory

BEM odświeża podejście do organizacji kodu CSS, wprowadzając trzy podstawowe składniki: Bloki, Elementy i Modyfikatory, stąd nazwa BEM. Bloki są najwyższym poziomem abstrakcji, reprezentującym poszczególne, autonomiczne jednostki kodu, takie jak nagłówek, stopka, czy inny konkretny segment strony. Elementy, to z kolei części konkretnego bloku, które nie mają niezależnego znaczenia poza nim. Przykładem może być przycisk menu należący do bloku nagłówka. Modyfikatory natomiast, to specjalne cechy, które wpływają na wygląd lub zachowanie bloków i elementów. Przykładem może być przycisk menu o modyfikatorze 'aktywny', który zmienia się gdy dany element jest wybrany. Wszystko to razem tworzy silną i elastyczną strukturę, która ułatwia zarządzanie i rozwijanie stylów CSS.

 

Powiązana usługa

Web development

Projektujemy i tworzymy dedykowane aplikacje webowe - od MVP, które pozwala szybko zweryfikować pomysł, po rozbudowane platformy i systemy rozwijane przez lata. Budujemy zarówno warstwę frontendową, jak i backend, API, bazy danych, panele administracyjne oraz integracje z zewnętrznymi systemami. Pracujemy m.in. z Next.js, React, Node.js, NestJS, Pythonem, PostgreSQL i MongoDB. Tworzymy rozwiązania dopasowane do konkretnego procesu biznesowego: aplikacje SaaS, systemy wewnętrzne, platformy sprzedażowe, serwisy internetowe, marketplace’y i systemy CMS.

Zasady nazywania w BEM: Unikaj konfliktów i zwiększ czytelność

Zastosowanie konwencji BEM w nazywaniu klasyfikuje się jako jedno z najskuteczniejszych metod zapewnienia czytelności i unikania konfliktów w arkuszach stylów CSS. W tej metodologii, każdy blok ma swoją unikalną nazwę, służącą jako fundament dla dalszego nazewnictwa elementów i modyfikatorów. Dzięki temu, nawet wielokrotne użycie tego samego bloku w różnych częściach projektu nie prowadzi do konfliktów nazw. Elementy, będące częściami bloku, otrzymują nazwy pochodzące od nazwy bloku, co zapewnia ich łatwą identyfikację. Modyfikatory zaś, odpowiadają za określenie stanu lub wariacji bloku bądź elementu. Rekomenduje się wybór zwięzłych, ale jednoznacznych nazw, co zwiększa przejrzystość kodu i ułatwia jego utrzymanie, nawet dla nowych członków zespołu projektowego. Takie podejście do nazywania nie tylko poprawia współpracę w zespole, ale również przyczynia się do łatwiejszego zarządzania i aktualizacji projektu.

osoba używająca komputera, BEM (Block, Element, Modifier)

Powiązana branża

HR / HRTech

Wraz z rozwojem firmy standardowe narzędzia HR nie zawsze nadążają za jej procesami. Pojawiają się dodatkowe arkusze, ręczne działania, osobne formularze i informacje przechowywane w kilku miejscach. Projektujemy dedykowane systemy HR oraz rozwijamy i integrujemy istniejące rozwiązania. Mogą obejmować rekrutację, onboarding, obieg dokumentów, obsługę wniosków pracowniczych, szkolenia czy komunikację z kandydatami. Nie zawsze trzeba budować cały system od podstaw. Czasem najlepszym rozwiązaniem jest dodatkowy moduł lub integracja, która uzupełnia narzędzia już wykorzystywane przez zespół. Dlaczego gotowy ATS przestaje wystarczać Gotowe narzędzia zakładają jeden uniwersalny proces rekrutacji. Tymczasem agencja pracuje inaczej niż dział HR w produkcji, a rekrutacja specjalistów IT inaczej niż masowa. Kiedy firma zaczyna prowadzić proces obok narzędzia — w arkuszach i mailach — to znak, że narzędzie przegrało. Budowę własnego systemu zaczynamy więc od zmapowania procesu takiego, jaki jest, z jego wyjątkami — dopiero potem powstaje interfejs. Widoczność firmy HR na zewnątrz to osobny wątek: strona doradztwa czy agencji musi dać się aktualizować bez programisty, bo oferta i treści zmieniają się z tygodnia na tydzień. Tak przebudowaliśmy serwis firmy doradztwa HR — na narzędziach, które zespół obsługuje samodzielnie. Drugi nurt to dokumenty: umowy, aneksy, zgody, badania, szkolenia BHP. Obieg papierowy kończy się segregatorami i pytaniem „czy to na pewno wróciło podpisane". Cyfrowy obieg z podpisem elektronicznym i automatycznymi przypomnieniami zdejmuje z kadr najbardziej mechaniczną część pracy — a pracownikowi daje jedno miejsce, w którym widzi swoje sprawy. Na co uważać przy narzędziach wewnętrznych Narzędzie wewnętrzne nie ma marketingu, który zmusi ludzi do korzystania — albo jest wygodniejsze od arkusza, albo umiera. Interfejs nie jest tu kosmetyką: liczy się liczba kliknięć w czynnościach powtarzanych codziennie, sensowne wartości domyślne i to, żeby system podpowiadał kolejny krok. Tę część pracy wykonujemy w ramach projektowania UX/UI , z testami na osobach, które będą z narzędzia korzystać naprawdę.

hrtech

Zastosowanie BEM w praktyce

Zastosowanie metodyki Block, Element, Modifier w praktyce projektowej jest niezwykle korzystne, szczególnie w dużych, złożonych systemach interfejsów użytkownika, gdzie utrzymanie spójności i czytelności kodu CSS staje się wyzwaniem. Poprzez podział struktury CSS na bloki, elementy i modyfikatory, BEM wprowadza jasne reguły nazewnictwa, które ułatwiają zarówno rozwój, jak i późniejsze utrzymanie kodu. Na przykład, blok może reprezentować komponent UI tak jak „menu”, elementy wewnątrz bloku, np. „menu-item”, definiują składowe części bloku, a modyfikatory takie jak „menu-item--active” opisują stan lub wariant danego elementu. Dzięki temu, każdy fragment kodu jest intuicyjnie zrozumiały i łatwo dostosowywalny. Praktyczne zastosowanie BEM zwiększa modularność kodu, ułatwia jego ponowne użycie oraz wspiera pracę zespołową, gdzie każdy członek zespołu szybko odnajduje się w projekcie.

 

Zalety i wady stosowania metodologii BEM w projektach CSS

Zastosowanie metodologii BEM w projektach CSS ma zarówno swoje zalety, jak i wady. Niezaprzeczalne korzyści to m.in. łatwiejsza identyfikacja i zrozumienie struktury kodu, poprawa wydajności przy pracy w zespole, możliwość ponownego wykorzystania komponentów oraz ograniczenie ryzyka powstawania konfliktów CSS. Metodologia BEM pomaga tworzyć kod scalony, konsekwentny i łatwy do utrzymania. Niemniej jednak, BEM nie jest pozbawiony wad: skomplikowana nomenklatura, która może początkowo przytłoczyć oraz zwiększona długość selektorów, co może wpłynąć na zwiększenie wielkości plików CSS. Wszystko zależy jednak od specyfiki projektu – w niektórych przypadkach zalety BEM mogą przewyższać jego potencjalne wady, co czyni go wartościowym wyborem.

FAQ

FAQ – metodologia BEM

  • BEM (Block, Element, Modifier) to metodologia organizacji kodu CSS stworzona przez Yandex w 2009 roku. Klasyczna konwencja nazewnictwa klas — Block (samodzielny komponent, np. .button), Element (część bloku, połączona z blokiem podwójnym podkreśleniem, .button__icon), Modifier (wariant bloku lub elementu, łączony podwójnym myślnikiem, .button--primary). Cel — eliminacja konfliktów nazw CSS, łatwiejsza nawigacja w kodzie, skalowalność dla dużych projektów. Klasycznie używana przez 2012–2018, dziś wyparta przez nowoczesne podejścia.

  • Tak, ale w mniejszej skali. BEM dominował 2012–2018, kiedy CSS-in-JS i frameworki komponentowe (React, Vue) były wczesne. Dziś — większość zespołów używa scoped CSS (Vue Single File Components, React z CSS Modules), Tailwind CSS (utility-first, eliminuje nazewnictwo klas), CSS-in-JS (styled-components, emotion). Te podejścia rozwiązują te same problemy (konflikty nazw, skalowanie) bez wymuszania długich nazw BEM. BEM pozostaje w legacy projektach i niektórych nowych projektach (głównie tradycyjnych HTML/CSS, WordPress themes).

  • Tailwind CSS — dominujący w nowoczesnych projektach 2023–2026. Klasy utility (np. flex justify-center bg-blue-500 px-4 py-2) zamiast nazewnictwa BEM. Zalety — krótszy CSS (jeden plik dla całego projektu), brak konfliktów nazw, szybki development, dobre IntelliSense. Wady — wygląd JSX/HTML zaśmiecony klasami. BEM jest semantyczny (klasa opisuje znaczenie — .article__title), Tailwind utility (klasa opisuje styl). Dla nowoczesnych React/Vue projektów Tailwind jest naturalnym wyborem. BEM dla legacy lub gdy zespół preferuje tradycyjne CSS.

  • Co BEM daje do dziś:

    • brak konfliktów nazw — długie nazwy są unikalne,
    • czytelność — z samej klasy widać, do którego komponentu należy,
    • łatwa nawigacja — wyszukanie .button__ pokazuje wszystkie elementy przycisku,
    • płaska specyficzność — każda klasa waży podobnie, więc nadpisania są przewidywalne,
    • wspólna konwencja zespołowa,
    • uniwersalność — działa w czystym HTML/CSS i w każdym frameworku,
    • zerowy próg wejścia — bez builda i narzędzi.

  • Współczesne alternatywy:

    • Tailwind CSS — utility-first, dominujący wybór ostatnich lat,
    • CSS Modules — klasy automatycznie scope'owane do komponentów,
    • CSS-in-JS — styled-components, Emotion, Vanilla Extract,
    • scoped CSS w komponentach Vue,
    • CSS Cascade Layers — natywna kontrola specyficzności bez konwencji nazw,
    • lekkie biblioteki — Open Props, Pico CSS.

    Dla nowych projektów reactowych naturalny duet to Tailwind plus shadcn/ui; BEM zostaje w projektach zastanych i tam, gdzie zespół świadomie woli tradycyjny CSS.

Blog

Powiązane artykuły

Czytaj więcej
Front-end

Crystallize jako headless commerce - kiedy warto go wybrać?

Crystallize to norweska platforma headless commerce, która łączy zarządzanie danymi produktowymi, treści i sprzedaż w jednym systemie. Pokazujemy cztery sygnały, że pasuje do Twojej firmy, trzy sytuacje, w których lepiej wybrać coś innego, i jak policzyć jej koszt, zanim przyjdzie pierwszy rachunek za użycie.

Tomasz Kozon
10 paź 2026
Front-end

Centra - headless e-commerce dla marek premium i globalnych

Centra to szwedzka platforma headless e-commerce dla marek modowych i lifestyle'owych, które sprzedają na wielu rynkach i jednocześnie prowadzą hurt. Na przykładzie marki, która przerosła swój sklep, pokazujemy, co Centra załatwia, czego nie zrobi za firmę i kiedy lepiej wybrać Shopify Plus lub platformę open source.

Tomasz Kozon
09 paź 2026
Front-end

Lynx - nowa alternatywa dla React Native?

Lynx to otwartoźródłowy framework od ByteDance, na którym działają fragmenty TikToka. Wyjaśniamy, czym różni się od React Native, dlaczego jest silnikiem do osadzania, a nie gotowym zestawem do budowy aplikacji, i w jakich trzech sytuacjach ma sens, a w jakich nie.

Tomasz Kozon
24 wrz 2026