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<!-- Utility-first (Tailwind) -->
<div class="flex p-4 text-sm">...</div>Catatan Implementasi
- Pilih satu gaya per proyek; jangan campur sembarangan.
- Utility-first cepat prototipe; BEM enak di CSS murni.
- ITCSS membantu atasi konflik spesifisitas.
Kesalahan Umum
- Nesting terlalu dalam (
.a .b .c .d) → rapuh. - Campur utility & BEM di satu komponen.
Glosarium
- BEM: metodologi penamaan Block-Element-Modifier.
- Specificity conflict: dua rule sama kuat saling timpa.