Ahogy a projektek növekednek, a sima CSS megbukik a globális hatókör miatt — minden szelektátor globálisan verseng, specificitási háborúk kitörnek, és senki sem mer kitörölni egy szabályt. A módszertanok struktúrát és elnevezési konvenciókat írnak elő, hogy a CSS karbantartható maradjon.
Egy elnevezési konvenció, amely explicit módon mutatja az összefüggéseket, és lapos specificitást tartalmaz (csak osztály-választók):
{ }
{ }
{ }
{ }
<div class="card card--featured">
<h2 class="card__title">...</h2>
</div>
A BEM értéke: az osztálynevek önmagyarázóak, konvenció szerinti hatókörrel rendelkeznek, és egyenletesen alacsony specificitással bírnak (nincs beágyazás/id háborúk).
Stílusok összeállítása apró, egyetlen célt szolgáló osztályokból közvetlenül a jelölésben:
<div class="flex items-center gap-4 p-6 rounded-lg shadow">...</div>
Előnyök: nincs elnevezés, nincs fel nem használt CSS (megtisztítva), konzisztens design token-ek. Hátrányok: bőséges HTML. Rendkívül népszerű a sebesség és konzisztencia miatt.
A modern megközelítés komponens keretrendszerekben — a stílusokat egy komponensre korlátozzuk, hogy ne szivárogjanak ki:
import styles from "./Card.module.css"; // class names are hashed/localized
<div className={styles.card}>...</div> // → .Card_card__a1b2 (unique)
Ez mechanikusan, nem pedig konvenció alapján oldja meg a globális hatókör problémáját.
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
Mindegyik ugyanazokkal az ellenségekkel küzd: specificitás csúszás, elnevezési ütközések, halott kód, és kiszámíthatatlan kaszkádok. Legyen szó elnevezésről (BEM), utility-kről (Tailwind), vagy hatókörről (Modules), a CSS-t kiszámíthatóvá és biztonságossá teszik a skálán történő változtatásokat illetően.
A nagy CSS kódbázisok globális hatókör és specificitási háborúk nélkül összeomolnak fegyelem nélkül.
Egy módszertan kiválasztása és konzisztens alkalmazása (napjainkban általában BEM, Tailwind vagy scoped CSS Modules) az, ami a stílusokat modulárisnak, törölhetőnek és konfliktusmentesnek tartja, ahogy a csapat és a kódbázis nő.