Augant projektams, paprastas CSS kenčia nuo globalios srities — kiekvienas selektorius konkuruoja globaliai, specifičumo karai išsidega ir niekas nesikiša trinti taisyklės. Metodai uždeda struktūrą ir pavadinimų konvencijas, kad CSS būtų lengvai palaikomas.
Pavadinimų konvencija, kuri padarytų ryšius aiškius ir specifičumą plokščią (visi pavieniai klasės):
{ }
{ }
{ }
{ }
<div class="card card--featured">
<h2 class="card__title">...</h2>
</div>
BEM vertė: klasių pavadinimai yra savaiškaibyti, riboti pagal susitarimą ir tolygiai žemi specifičumu (nėra lizdavimo/id karu).
Sudėkite stilius iš mažų vieno tikslo klasių tiesiai į žymėjimą:
<div class="flex items-center gap-4 p-6 rounded-lg shadow">...</div>
Privalumai: nėra pavadinimų, nėra nepavartotos CSS (išvalytos), nuoseklūs dizaino tokenai. Trūkumai: šlamštus HTML. Labai populiarus dėl greičio ir nuoseklumo.
Šiuolaikinis požiūris komponentų sistemose — ribokite stilius komponentui, kad jie negalėtų nutekėti:
import styles from "./Card.module.css"; // class names are hashed/localized
<div className={styles.card}>...</div> // → .Card_card__a1b2 (unique)
Tai sprendžia globalios srities problemą mechaniškai, o ne pagal susitarimą.
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
Visos jų kovoja su tais pačiais priešais: specifičumo šliaužimu, pavadinimų susidūrimais, negyvais kodais ir nenuspėjamomis kaskadomis. Ar per pavadinimus (BEM), ar per naudingumą (Tailwind), ar per ribojimą (Moduliai), jie laiko CSS nuspėjamą ir saugų keisti didelėje skalėje.
Didelės CSS kodo bazės sugriūva dėl globalios srities ir specifičumo karu be disciplinos.
Pasirinkus ir nuosekliai taikant metodą (šiandien dažniausiai BEM, Tailwind arba riboti CSS moduliai) yra tai, kas laiko stilius modulinius, išbrauktus ir be konfliktų augant komandai ir kodo bazei.