CSS Architecture – BEM, OOCSS, SMACSS, ITCSS

Maintainable CSS needs a naming convention and a layered architecture.

Method	Core Idea
BEM	Block __ Element -- Modifier (.btn--primary).
OOCSS	Separate structure from skin (object‑oriented).
SMACSS	Categorises rules: Base, Layout, Module, State, Theme.
ITCSS	Inverted Triangle – from generic to explicit.

---

Example: BEM button

<button class="btn btn--primary">Click</button>

.btn { padding:0.5rem 1rem; border:none; }
.btn--primary { background:#0066cc; color:#fff; }