S růstem projektů trpí vanilla CSS globálním rozsahem — každý selektor soutěží globálně, vypukají specificity války a nikdo se neodváží smazat pravidlo. Metodologie vnucují strukturu a konvence pojmenovávání, aby byla CSS údržovatelná.
Konvence pojmenovávání, která činí vztahy explicitní a udržuje specificity plochým (všechny jednoduché třídy):
{ }
{ }
{ }
{ }
<div class="card card--featured">
<h2 class="card__title">...</h2>
</div>
Hodnota BEM: názvy tříd jsou samo-dokumentující, vymezené konvencí a jednotně nízká specificity (žádné nesting/id války).
Současné styly z malých jednouúčelových tříd přímo v značce:
<div class="flex items-center gap-4 p-6 rounded-lg shadow">...</div>
Výhody: bez pojmenovávání, žádné nepoužívané CSS (vyčištěné), konzistentní tokens designu. Nevýhody: verbose HTML. Obrovský oblíbený pro svou rychlost a konzistenci.
Moderní přístup v rámcích komponent — obor stylů na komponentu, aby nemohly uniknout:
import styles from "./Card.module.css"; // class names are hashed/localized
<div className={styles.card}>...</div> // → .Card_card__a1b2 (unique)
To řeší problém globálního rozsahu mechanicky spíše než konvencí.
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
Všichni bojují se stejnými nepřáteli: specificity creep, kolize pojmenovávání, mrtvý kód a nepředvídatelné kaskády. Ať už prostřednictvím pojmenovávání (BEM), nástrojů (Tailwind) nebo vymezení (Modules), udržují CSS předvídatelné a bezpečné pro změnu v měřítku.
Velké CSS kódová základna se zhroutí pod globálním rozsahem a specificity válkami bez disciplíny.
Výběr a konzistentní uplatňování metodologie (obvykle BEM, Tailwind nebo scoped CSS Modules dnes) je to, co udržuje styly modulární, smazatelné a bez konfliktů, jak tým a codebase roste.