Pe măsură ce proiectele cresc, CSS simplu suferă din cauza domeniului global — fiecare selector concurează la nivel global, apar războaie de specificitate, iar nimeni nu îndrăznește șterge o regulă. Metodologiile impun structură și convenții de denumire pentru a menține CSS ușor de întreținut.
O convenție de denumire care face relațiile explicite și menține specificitatea plană (toate clasele unice):
{ }
{ }
{ }
{ }
<div class="card card--featured">
<h2 class="card__title">...</h2>
</div>
Valoarea BEM: numele claselor se autodocumentează, sunt în domeniu prin convenție, și au uniform specificitate scăzută (fără guerre de imbricare/id).
Compuneți stiluri din clase mici și cu un singur scop direct în marcaj:
<div class="flex items-center gap-4 p-6 rounded-lg shadow">...</div>
Avantaje: fără denumire, fără CSS nefolosit (curățat), tokeni de design consistenți. Dezavantaje: HTML verbose. Extrem de popular pentru viteza și consistența sa.
Abordarea modernă în cadrul componentelor — domeniu stiluri pentru o componentă pentru ca acestea să nu poată scăpa:
import styles from "./Card.module.css"; // class names are hashed/localized
<div className={styles.card}>...</div> // → .Card_card__a1b2 (unique)
Aceasta rezolvă problema domeniului global mecanic în loc de prin convenție.
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
Tote se luptă cu aceiași dușmani: creeping specificity, coliziuni de denumire, cod mort și cascadă imprevizibilă. Fie prin denumire (BEM), utilitare (Tailwind) sau domeniu (Modules), acestea mențin CSS previzibil și sigur de schimbat la scară.
Bazele de cod CSS mari se prăbușesc sub domeniu global și război de specificitate fără disciplină.
Alegerea și aplicarea consecventă a unei metodologii (în mod obișnuit BEM, Tailwind sau CSS Modules cu domeniu azi) este ceea ce menține stilurile modulare, ștergibile și fără conflicte pe măsură ce o echipă și o bază de cod cresc.