W miarę wzrostu projektów zwykły CSS cierpi na globalny zakres — każdy selektor konkuruje na poziomie globalnym, wybuchają wojny specificity, a nikt nie śmie usunąć reguły. Metodologie nakładają strukturę i konwencje nazewnictwa, aby utrzymać CSS w dobrej kondycji.
Konwencja nazewnictwa, która czyni relacje jawnymi i utrzymuje specificity na płaskim poziomie (wszystkie pojedyncze klasy):
{ }
{ }
{ }
{ }
<div class="card card--featured">
<h2 class="card__title">...</h2>
</div>
Wartość BEM: nazwy klas są autodokumentujące się, objęte zakresem konwencji i jednolicie niskiego specificity (brak zagnieżdżania/wojen id).
Skladaj style z małych, jednozadaniowych klas bezpośrednio w znaczniku:
<div class="flex items-center gap-4 p-6 rounded-lg shadow">...</div>
Zalety: brak nazewnictwa, brak nieużywanego CSS (oczyszczony), spójne tokeny designu. Wady: pełne HTML. Niezwykle popularne ze względu na szybkość i spójność.
Nowoczesne podejście w ramach komponentów — zakres style do komponentu, aby nie mogły się wyciekać:
import styles from "./Card.module.css"; // class names are hashed/localized
<div className={styles.card}>...</div> // → .Card_card__a1b2 (unique)
Rozwiązuje to problem globalnego zakresu mechanicznie, a nie poprzez konwencję.
OOCSS — separate structure from skin, reuse objects
SMACSS — categorize rules (base, layout, module, state, theme)
ITCSS — layer CSS by specificity (generic → explicit), low to high
Ze wszystkimi walczą z tymi samymi wrogami: pełzająca specificity, kolizje nazw, martwy kod i nieprzewidywalne kaskady. Niezależnie od tego, czy poprzez nazewnictwo (BEM), narzędzia (Tailwind) czy zakres (Modules), utrzymują CSS przewidywalnym i bezpiecznym do zmian w skali.
Wielkie bazy kodów CSS upadają pod naporem globalnego zakresu i wojen specificity bez dyscypliny.
Wybór i konsekwentne stosowanie metodologii (powszechnie dzisiaj BEM, Tailwind lub scoped CSS Modules) to to, co utrzymuje style modularne, usuwalne i wolne od konfliktów, gdy zespół i codebase rosną.