CSS Architecture Bem Utility Itcss

Ringkasan

Saat proyek besar, CSS mudah berantakan. Architecture memberi aturan penamaan & urutan agar maintainable.

Konsep Dasar

• BEM: block__element--modifier (.card__title--active). Terprediksi, tanpa nested dalam.
• Utility-first: class kecil (flex, p-4, text-sm) — komposisi di HTML (Tailwind).
• ITCSS: urutan layer (Settings → Tools → Generic → Elements → Objects → Components → Utilities) dari rendah ke tinggi spesifisitas.
• CSS Modules / scoped: isolasi per komponen (Svelte/Vue/React).

Cara Kerja / Struktur

css

/* BEM */
.card__title--active { color: blue; }
/* ITCSS layer order */
@layer generic, elements, components, utilities;

html