Ko projekti rastejo, navaden CSS trpi od globalnega obsega — vsak selektor se tekmuje globalno, izbruhnejo wojne specifičnosti, in nihče se ne upa izbrisati pravila. Metodologije impose strukturo in konvencije poimenovanja, da ostane CSS vzdržljiv.
Konvencija poimenovanja, ki naredi razmerja eksplicitna in drži specifičnost ravno (samo enojne razrede):
{ }
{ }
{ }
{ }
<div class="card card--featured">
<h2 class="card__title">...</h2>
</div>
Vrednost BEM-a: imena razredov so samodokumentirajuča, s konvencijo omejena, in enakomerno nizka specifičnost (brez gnezdenja/id vojn).
Zložite sloge iz drobnih enopredmetnih razredov neposredno v označevanje:
<div class="flex items-center gap-4 p-6 rounded-lg shadow">...</div>
Prednosti: brez poimenovanja, brez neuporabnega CSS-a (očiščeno), skladni žetoni oblikovanja. Slabosti: verbozna HTML. Ogromno priljubljeno za hitrost in skladnost.
Sodoben pristop v ogrodjih komponent — obseg slogov na komponento, tako da se ne morejo razširiti:
import styles from "./Card.module.css"; // class names are hashed/localized
<div className={styles.card}>...</div> // → .Card_card__a1b2 (unique)
To reši problem globalnega obsega mehalno, ne po konvenciji.
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
Vsi se borijo proti istim sovražnikom: specifičnostnemu polzanju, trkom imen, mrtvemu kodu, in nepredvidljivim kaskadam. Ali prek poimenovanja (BEM), utility-jev (Tailwind), ali obsega (Modules), ohranijo CSS napovedljiv in varen za spremembe v velikem obsegu.
Velike CSS codebaze se sesedejo pod globalnim obsegom in vojnami specifičnosti brez discipline.
Izbira in dosledna uporaba metodologije (pogosto BEM, Tailwind, ali scoped CSS Modules danes) je tisto, kar sloge drži modularne, izbrisljive, in brez konfliktov, ko rastejo ekipa in codebase.