CSS Reset Normalize Modern

Ringkasan

Browser punya default style berbeda. Reset/Normalize membuat titik awal konsisten sebelum kita style.

Konsep Dasar

• Reset: hapus semua default (* { margin:0; padding:0; box-sizing:border-box }).
• Normalize: samakan, bukan hapus — pertahankan usefulness default.
• Modern reset: kombinasi (box-sizing, margin:0, img block, button inherit font).
• Framework (Tailwind) sudah bawa preflight.

Cara Kerja / Struktur

css

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
body { line-height: 1.5; }
img, picture, svg, video { display: block; max-width: 100%; }
button, input { font: inherit; }

Catatan Implementasi

• box-sizing: border-box global → ukuran lebih intuitif.
• Pakai Normalize bila mau default yang "masuk akal", Reset bila mau kontrol penuh.
• Taruh di paling atas stylesheet.

Kesalahan Umum

• Reset tapi lupa line-height → teks rapat.
• Override terlalu banyak (reset jadi beban).

Glosarium

• Preflight: reset bawaan Tailwind.
• Box-sizing: model perhitungan ukuran (border-box = termasuk border/padding).

Referensi

• CSS Display, Overflow, Containment