Kako projekti rastu, običan CSS pati od globalnog opsega — svaki selektor se globalno natječe, ratovi specifičnosti izbijaju, i nitko se ne usudi obrisati pravilo. Metodologije nameću strukturu i konvencije nazivanja kako bi CSS ostao održavan.
Konvencija nazivanja koja čini odnose eksplicitnim i održava specifičnost ravnom (sve jedne klase):
{ }
{ }
{ }
{ }
<div class="card card--featured">
<h2 class="card__title">...</h2>
</div>
Vrijednost BEM-a: imena klasa su samodokumentiranog karaktera, ograničena po konvenciji, i uniformno niske specifičnosti (bez ugniježđivanja/id ratova).
Komponiranje stilova iz malih jednokvalentnih klasa direktno u markup:
<div class="flex items-center gap-4 p-6 rounded-lg shadow">...</div>
Prednosti: nema nazivanja, nema nekorištenog CSS-a (čišćenje), dosljedni design tokeni. Nedostaci: opširnog HTML-a. Enormno popularan zbog svoje brzine i dosljednosti.
Moderni pristup u komponentnim okvirima — opseg stilova na komponentu kako oni ne mogu procuriti:
import styles from "./Card.module.css"; // class names are hashed/localized
<div className={styles.card}>...</div> // → .Card_card__a1b2 (unique)
Ovo rješava problem globalnog opsega mehanički umjesto konvencijom.
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
Svi se bore protiv istih neprijatelja: specifičnosti penjanja, sudara imena, mrtvog koda, i nepredvidivog kaskadiranja. Bilo preko nazivanja (BEM), utilities (Tailwind), ili opsega (Modules), oni drže CSS predvidivim i sigurnim za mijenjanje u školi.
Veliki CSS kodovi kolapsu pod globalnim opsegom i ratovima specifičnosti bez discipline.
Odabir i dosljedna primjena metodologije (obično BEM, Tailwind, ili scoped CSS Modules danas) je ono što čini stilove modularnim, izbrisivim, i bez konflikta kako se tim i codebase povećavaju.