Når projekter vokser, lider vanilla CSS af globalt omfang — hver selector konkurrerer globalt, specificity-krige opstår, og ingen tør slette en regel. Metodologier påtvinger struktur og navngivningskonventioner for at holde CSS vedligeholdelig.
En navngivningskonvention, der gør relationer eksplicitte og holder specificity flad (alle enkelte klasser):
{ }
{ }
{ }
{ }
<div class="card card--featured">
<h2 class="card__title">...</h2>
</div>
BEM's værdi: klassenavne er selvdokumenterende, begrænset ved konvention, og ensartet lav specificity (ingen nesting/id-krige).
Sammensæt stilarter fra små enkeltformål-klasser direkte i markup:
<div class="flex items-center gap-4 p-6 rounded-lg shadow">...</div>
Fordele: ingen navngivning, intet ubrugt CSS (ryddet), ensartede designtokens. Ulemper: verbose HTML. Enormt populær for dets hastighed og konsistens.
Den moderne tilgang i komponent-frameworks — omfang stilarter til en komponent, så de ikke kan lække:
import styles from "./Card.module.css"; // class names are hashed/localized
<div className={styles.card}>...</div> // → .Card_card__a1b2 (unique)
Dette løser det globale omfang-problem mekanisk snarere end ved konvention.
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
De bekæmper alle de samme fjender: specificity creep, navngivningskollisioner, død kode og uforudsigelige kaskader. Hvad enten via navngivning (BEM), utility (Tailwind) eller omfang (Modules), holder de CSS forudsigelig og sikker at ændre i skala.
Store CSS-kodebaser kollapser under globalt omfang og specificity-krige uden disciplin.
At vælge og konsekvent anvende en metodologi (almindeligvis BEM, Tailwind eller scoped CSS Modules i dag) er det, der holder stilarter modulære, sletbare og konfliktfrie, når et hold og en codebase vokser.