Step 3 - CSS Dasar Yang Berdampak

Fokus ke 20% aturan CSS yang memberi 80% hasil visual dan keterbacaan.

CSS yang efektif bukan yang paling banyak property, tapi yang paling tepat menyelesaikan masalah baca, hirarki, dan fokus.

Tiga pilar CSS praktikal

• tipografi yang enak dibaca
• spasi yang konsisten
• kontras yang aman

Step praktik

Step 1: Pasang token dasar

:root {
  --bg: #ffffff;
  --text: #1f2937;
  --muted: #6b7280;
  --accent: #f59e0b;
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
}

Step 2: Rapikan readability

body {
  line-height: 1.7;
  color: var(--text);
}

h1, h2, h3 {
  line-height: 1.2;
  letter-spacing: -0.02em;
}

Step 3: Atur ritme vertikal

Pakailah sistem spacing tetap, jangan acak per elemen.

Step 4: Bikin style list yang mudah discan

List harus punya jarak antar item cukup supaya mata tidak cepat lelah.

Studi kasus nyata

Kasus: Artikel bagus tapi capek dibaca

Masalah: line-height sempit, heading terlalu rapat, warna teks kusam.
Solusi: token + ritme spasi + perbaikan kontras.

Hasil:

• waktu baca naik
• bounce rate turun
• isi lebih mudah dipindai mobile

Checklist latihan

• Buat token warna dan spacing
• Terapkan line-height body 1.6-1.8
• Atur jarak antar heading dan paragraf
• Tes tampilan di layar mobile

Checklist mengingat

• CSS bagus itu jelas, bukan ramai
• Konsistensi spacing lebih penting dari efek
• Kontras harus nyaman, bukan sekadar estetik

Mini proyek

Refactor 1 halaman docs lama dengan token CSS.
Target: visual jadi lebih rapi tanpa ganti struktur HTML.

Progress belajar

Progress belajar topik CSS: 20%