Przekształć element BEM w osobny blok, gdy ma spójny cel i może samodzielnie zarządzać swoją implementacją poza blokiem nadrzędnym. Skorzystaj z poniższego ćwiczenia na Macu, aby sprawdzić tę granicę, zanim zmienisz nazwy klas lub przeniesiesz CSS.

Co sprawia, że element jest niezależny?

Jeśli utrzymujesz stronę HTML napisaną ręcznie, praktyczne pytanie brzmi: czy rozbudowana sekcja powinna pozostać częścią elementu nadrzędnego, czy stać się osobnym blokiem utrzymywanym niezależnie. W BEM blok to logicznie i funkcjonalnie niezależny komponent; element należy do bloku i nie może być używany niezależnie od niego. Bloki mogą zawierać inne bloki. Kluczowe pojęcia

Rozważ przykładową stronę zawierającą blok workbench. Jego element workbench__preview zawiera abstrakcyjny kształt, etykietę i podpis. Początkowo wszystkie trzy służą wyłącznie panelowi roboczemu. Później ten sam podgląd jest potrzebny w wąskim obszarze shelf. To drugie umiejscowienie daje konkretne zadanie ekstrakcji: ustal, czy podgląd może stać się blokiem shape-tile z własnym wyglądem i strukturą wewnętrzną.

Sama głębokość zagnieżdżenia o tym nie decyduje. BEM dopuszcza zagnieżdżone elementy w DOM, zachowując płaskie nazewnictwo: workbench__preview, workbench__label i workbench__caption. Nazwa taka jak workbench__preview__caption błędnie sugeruje, że element należy do innego elementu. Oficjalny przewodnik szybkiego startu wskazuje też blok usługowy jako rozwiązanie, gdy złożony element wymaga niezależnie uporządkowanych części wewnętrznych. Szybki start

Warto odróżnić przeniesienie znaczników do osobnego szablonu w celu poprawy czytelności od utworzenia nowego bloku BEM. Pierwszą zmianę można wprowadzić bez natychmiastowego decydowania się na drugą. Wyraźnie określ granicę bloku, gdy potrafisz opisać, za co odpowiada wydzielona część, co zapewnia jej element nadrzędny i jak zostanie wykorzystana w innym miejscu.

Przed wydzieleniem sprawdź zależności

Poniższa pomoc w podjęciu decyzji to metoda redakcyjna wynikająca z zasady niezależności BEM. Nie jest to oficjalny system punktacji. Zastosuj ją do jednego kandydującego poddrzewa, zamiast oceniać całą stronę naraz.

Pytanie Przesłanki przemawiające za wydzieleniem Powód, by pozostawić element
Czy ma jasno określony cel? „Wyświetla kształt z etykietą i podpisem” Jego jedynym celem jest „wewnętrzny kontener panelu roboczego”
Czy może samodzielnie zarządzać swoim wyglądem wewnętrznym? Obramowanie, odstępy i typografia przemieszczają się razem Te reguły są nierozłączne ze strukturą elementu nadrzędnego
Czy element nadrzędny może osobno określać położenie? Element nadrzędny kontroluje dostępną przestrzeń i otaczające odstępy Kandydat wymaga konkretnego układu elementu przodka
Czy jego warianty go opisują? Kompaktowy kafelek ma sens w kilku miejscach Każdy wariant nosi nazwę konkretnego elementu nadrzędnego
Czy osobne utrzymanie przyniosłoby teraz korzyść? Istnieje drugie miejsce użycia lub znaczna odpowiedzialność wewnętrzna Wydzielenie dodałoby interfejs, dla którego obecnie nie ma zastosowania

Zanim zmienisz kod, zapisz jedno zdanie: „shape-tile odpowiada za swój kształt, etykietę, podpis i wewnętrzne odstępy; element nadrzędny odpowiada za położenie i dostępną szerokość”. Jeśli to zdanie zaczyna obejmować układ kolumn panelu roboczego lub kolejność sąsiednich elementów, zastanów się ponownie, gdzie powinna przebiegać granica.

Oddziel układ zewnętrzny od wyglądu wewnętrznego. Wskazówki dotyczące CSS w BEM przypisują geometrię zewnętrzną i pozycjonowanie elementowi nadrzędnemu, a także pokazują, jak połączyć na tym samym węźle klasę niezależnego bloku z klasą elementu nadrzędnego. Takie połączenie nazywa się miksem. Metodologia CSS

Na przykład class="shape-tile workbench__preview" może wyrażać obie tożsamości. Niech shape-tile określa obramowanie i układ wewnętrzny, a workbench__preview — położenie. Unikaj przypisywania tej samej właściwości przez obie tożsamości, chyba że nadpisanie jest zamierzoną częścią kontraktu.

Przygotuj porównanie lokalnie na Macu

Utwórz nowy folder na potrzeby tego ćwiczenia, aby porównać wydzielony projekt bez modyfikowania istniejącej strony. Potrzebujesz zwykłego edytora tekstu i przeglądarki komputerowej; przykład nie wymaga instalowania pakietów, JavaScriptu, pobierania czcionek ani plików graficznych.

W aplikacji TextEdit wybierz Plik > Nowy, a następnie Format > Zamień na zwykły tekst. Wklej poniższy kod HTML i zapisz plik jako index.html, wybierając Użyj .html, jeśli pojawi się odpowiedni monit. Apple opisuje te kroki oraz wyjaśnia, jak ponownie otworzyć HTML jako kod źródłowy, używając opcji Ignoruj polecenia tekstu sformatowanego. Praca z dokumentami HTML w aplikacji TextEdit na Macu

Utwórz kompletny dokument HTML

Ten dokument umieszcza proponowany komponent w dwóch różnych elementach nadrzędnych. Wszystkie etykiety są przykładowe, a abstrakcyjny kształt jest rysowany za pomocą CSS. Zapisz poniższy kod jako index.html.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Shape tile boundary exercise</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body class="demo">
  <h1>Shape tile boundary exercise</h1>
  <main class="demo__regions">
    <section class="workbench">
      <h2>Workbench A</h2>
      <div class="shape-tile workbench__preview">
        <span class="shape-tile__shape" aria-hidden="true"></span>
        <div class="shape-tile__content">
          <h3 class="shape-tile__label">Form A</h3>
          <p class="shape-tile__caption">Rounded sample, first arrangement.</p>
        </div>
      </div>
    </section>
    <section class="shelf">
      <h2>Shelf B</h2>
      <div class="shape-tile shelf__preview">
        <span class="shape-tile__shape" aria-hidden="true"></span>
        <div class="shape-tile__content">
          <h3 class="shape-tile__label">Form B</h3>
          <p class="shape-tile__caption">Rounded sample, second arrangement.</p>
        </div>
      </div>
    </section>
  </main>
</body>
</html>

Dodaj kompletny arkusz stylów

Utwórz kolejny plik zwykłego tekstu o nazwie styles.css w tym samym folderze. Upewnij się, że jego faktyczna nazwa to styles.css, a nie styles.css.txt. Wklej cały poniższy arkusz stylów:

/* Page and host styles */
.demo {
  margin: 0 auto;
  padding: 24px;
  max-width: 960px;
  font-family: system-ui, sans-serif;
  background: #f1f3f5;
  color: #243047;
}
.demo__regions {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}
.workbench,
.shelf {
  box-sizing: border-box;
  padding: 16px;
  max-width: 100%;
  border: 1px dashed #6b778a;
}
.workbench { width: 480px; }
.shelf { width: 256px; }
.workbench__preview { margin-top: 24px; }
.shelf__preview { margin-top: 12px; }

/* Independent component styles */
.shape-tile {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border: 1px solid #718096;
  border-radius: 12px;
  background: #fff;
  color: #243047;
  font: 16px/1.5 system-ui, sans-serif;
}
.shape-tile__shape {
  flex: 0 0 48px;
  height: 48px;
  border-radius: 16px 24px 12px 24px;
  background: #536dbe;
}
.shape-tile__content {
  flex: 1 1 160px;
  min-width: 0;
  overflow-wrap: anywhere;
}
.shape-tile__label {
  margin: 0;
  font-size: 18px;
  line-height: 1.3;
}
.shape-tile__caption { margin: 6px 0 0; }

Otwórz index.html w Safari lub innej przeglądarce komputerowej. Docelowe porównanie obejmuje szerszy panel roboczy i węższą półkę. Ich kafelki współdzielą style komponentu; dostępna przestrzeń decyduje o tym, czy kształt i tekst mieszczą się obok siebie, czy zawijają.

Kontrakt zasobów ma tu znaczenie: rel="stylesheet" ustanawia relację z zewnętrznym arkuszem stylów, a href="styles.css" wskazuje plik potrzebny temu dokumentowi. Dodanie klasy BEM nie tworzy tego odwołania do zasobu. Podczas przenoszenia ćwiczenia trzymaj oba pliki razem. Standard HTML definiuje tę relację arkusza stylów. Standard HTML: Typ linku „stylesheet”

Jak sprawdzić, czy wydzielenie się udało?

Wykorzystaj porównanie jako ćwiczenie diagnostyczne. Poniższe oczekiwane wyniki wynikają z dostarczonego kodu; to kontrole do wykonania w przeglądarce, a nie wyniki przeprowadzonych testów.

  1. Sprawdź stan wyjściowy. Oba kafelki powinny mieć białe tło, niebieski zaokrąglony kształt, etykietę i podpis. Jeśli wszystko wygląda na pozbawione stylów, przed oceną granicy komponentu sprawdź nazwę arkusza stylów i odwołanie do niego.
  2. Usuń jedną klasę położenia. Usuń workbench__preview z pierwszego kafelka, zapisz i odśwież stronę. Jego górny margines powinien się zmienić, a wygląd wewnętrzny pozostać nienaruszony.
  3. Usuń jedną klasę elementu nadrzędnego. Tymczasowo usuń workbench z otaczającej sekcji. Ramka elementu nadrzędnego i stała szerokość powinny zniknąć; kafelek powinien zachować style komponentu.
  4. Zmień współdzielony komponent. Zmień promień zaokrąglenia obramowania w .shape-tile. Obie instancje powinny się zmienić bez edytowania selektorów elementów nadrzędnych.
  5. Sprawdź przy dłuższej treści. Zastąp jeden podpis dłuższym przykładowym zdaniem i zwęź okno przeglądarki. Sprawdź zawijanie tekstu i to, czy cały tekst pozostaje widoczny.

Interpretuj problemy przez pryzmat odpowiedzialności. Brak obramowania po usunięciu klasy elementu nadrzędnego oznacza, że styl komponentu może nadal być przypisany do selektora elementu nadrzędnego. Nieoczekiwane odstępy wokół wskazują na reguły położenia. Różnice w tekście mogą ujawnić style dziedziczone lub selektory globalne. Usuń przyczynę zależności, zanim dodasz kolejne nadpisanie.

Nazewnictwo BEM nie tworzy izolacji stylów egzekwowanej przez przeglądarkę. Dziedziczenie CSS nadal odbywa się w drzewie dokumentu: dziedziczone właściwości przyjmują wartości od elementu nadrzędnego, jeśli kaskada nie określa wartości dla danego elementu. Definiuje to specyfikacja CSS Cascading and Inheritance, a ilustruje dokumentacja MDN. CSS Cascading and Inheritance Module Level 5, sekcja 7.2, Dziedziczenie

W przykładzie celowo ustawiono czcionkę i kolor tekstu kafelka w jego elemencie głównym. Na prawdziwej stronie dziedziczenie typografii witryny może być pożądane. Zapisz to jako zależność. Niezależność oznacza, że wymagane środowisko jest zrozumiałe i przenośne; nie musi oznaczać odtwarzania wszystkich domyślnych ustawień przeglądarki w każdym komponencie.

Kiedy lepiej pozostawić element?

Pozostaw kandydujący element jako element, gdy jego znaczenie i implementacja nadal zależą od elementu nadrzędnego. Kontener wyrównujący, używany tylko w panelu roboczym, może mieć wielu potomków i wciąż nie potrzebować osobnej, publicznej tożsamości. Spłaszcz nazwy BEM i uporządkuj strukturę, zanim wprowadzisz nowy blok.

Z drugiej strony komponent używany tylko raz nadal może zasługiwać na wydzielenie, jeśli jego wewnętrzna odpowiedzialność jest znaczna, a granica zależności jasna. Traktuj ponowne użycie jako dodatkową przesłankę, a nie wymaganą liczbę zastosowań. W tym ćwiczeniu drugie umiejscowienie ułatwia ocenę granicy; nie ustanawia uniwersalnej zasady dwóch zastosowań.

Ponownie rozważ też wydzielenie, jeśli zaczyna ono gromadzić warianty specyficzne dla elementów nadrzędnych. Nazwy takie jak shape-tile--inside-workbench sugerują, że położenie staje się częścią interfejsu komponentu. Najpierw zapytaj, czy ta różnica powinna należeć do workbench__preview. Zarezerwuj wariant komponentu dla różnicy, którą potrafisz wyjaśnić w kategoriach samego komponentu.

Czy nowoczesne zakresy CSS zmieniają tę decyzję?

Reguła @scope może ograniczać obszar dopasowania objętych nią selektorów, co pomaga zarządzać selektorami w poddrzewie dokumentu. MDN oznacza ją obecnie jako Baseline 2026, dostępną we wszystkich aktualnych wersjach przeglądarek od marca 2026 roku, zaznaczając jednocześnie, że starsze urządzenia lub przeglądarki mogą jej nie obsługiwać. Nie zakładaj, że obsługuje ją każda instalacja systemu Mac. Reguła CSS @scope

Dostarczone ćwiczenie używa zwykłych selektorów klas i nie wymaga @scope. Jeśli obsługujesz przeglądarki bez zakresów, zachowaj podstawowe style komponentu w tych regułach. Zakresy mogą ułatwić wyrażenie granicy, ale decyzja o tym, kto odpowiada za komponent, nadal wymaga jasnego określenia jego celu, zależności i sposobu rozmieszczenia.

Wydziel złożony element, gdy możesz przenieść razem jego cel i implementację wewnętrzną, pozostawić otaczający układ elementowi nadrzędnemu oraz pokazać wynik w innym kontekście. Jeśli te odpowiedzialności nadal się przeplatają, pozostaw element na miejscu, dopóki ich nie uporządkujesz; samo skrócenie nazwy klasy nie kończy refaktoryzacji.

Źródła