Nalika proyek berkembang, CSS polos nandhang global scope — saben selector bersaing global, specificity wars meledak, lan ora ana sing wani ngrapat rule. Methodologies ngenthengke struktur lan naming conventions supaya CSS tetep maintainable.
Naming convention sing nggawe relationships jelas lan keep specificity flat (kabeh single classes):
{ }
{ }
{ }
{ }
<div class="card card--featured">
<h2 class="card__title">...</h2>
</div>
Nilai BEM: class names self-documenting, scoped by convention, lan uniformly low-specificity (ora nesting/id wars).
Compose styles saka tiny single-purpose classes langsung ing markup:
<div class="flex items-center gap-4 p-6 rounded-lg shadow">...</div>
Kurungan: ora perlu naming, ora ana unused CSS (purged), consistent design tokens. Kekurangan: verbose HTML. Banget populer amarga kecepetan lan consistency-nya.
Modern approach ing component frameworks — scope styles menyang component supaya ora bisa kebocoran:
import styles from "./Card.module.css"; // class names are hashed/localized
<div className={styles.card}>...</div> // → .Card_card__a1b2 (unique)
Ini ngatasi global-scope problem mechanical ora liwat convention.
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
Semua lawan musuh sing padha: specificity creep, naming collisions, dead code, lan unpredictable cascades. Bakal liwat naming (BEM), utilities (Tailwind), utawa scoping (Modules), semua ngerti CSS predictable lan aman diganti ing scale.
Large CSS codebases ambrol ing global scope lan specificity wars tanpa discipline.
Pilih lan consistently nerapake methodology (biasane BEM, Tailwind, utawa scoped CSS Modules saiki) yaiku sing nggawe styles modular, deletable, lan conflict-free nalika team lan codebase berkembang.