Naarmate projecten groeien, lijdt gewone CSS onder globale scope — elke selector concurreert wereldwijd, specificiteitsoorlogen ontstaan, en niemand durft een regel te verwijderen. Methodologieën leggen structuur en naamconventies op om CSS onderhoudbaar te houden.
Een naamconventie die relaties expliciet maakt en de specificiteit vlak houdt (allemaal enkele klassen):
{ }
{ }
{ }
{ }
<div class="card card--featured">
<h2 class="card__title">...</h2>
</div>
De waarde van BEM: klassenamen spreken voor zich, zijn conventioneel bereikt, en hebben uniform lage specificiteit (geen nesteling/id-oorlogen).
Stel stijlen samen uit kleine eendoelige klassen rechtstreeks in markup:
<div class="flex items-center gap-4 p-6 rounded-lg shadow">...</div>
Voordelen: geen naamgeving, geen ongebruikte CSS (opgeschoond), consistente ontwerptokens. Nadelen: uitgebreid HTML. Enorm populair vanwege snelheid en consistentie.
De moderne benadering in componentframeworks — bereik stijlen tot een component zodat ze niet kunnen lekken:
import styles from "./Card.module.css"; // class names are hashed/localized
<div className={styles.card}>...</div> // → .Card_card__a1b2 (unique)
Dit lost het globale-scope-probleem mechanisch op in plaats van per conventie.
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 bestrijden allemaal dezelfde vijanden: specificiteitsgroei, naambotsingen, dode code en onvoorspelbare cascades. Of via naamgeving (BEM), hulpprogramma's (Tailwind) of bereik (Modules), ze houden CSS voorspelbaar en veilig om op schaal te wijzigen.
Grote CSS-codebases bezwijken onder globale scope en specificiteitsoorlogen zonder discipline.
Het kiezen en consequent toepassen van een methodologie (tegenwoordig meestal BEM, Tailwind of scoped CSS Modules) is wat stijlen modulair, verwijderbaar en conflictvrij houdt wanneer een team en codebase groeien.