Memilih Unit yang Tepat

Section ini sudah memperkenalkan banyak pilihan: px, persen, em, rem, vw, vh, dvh, ch, auto, calc(), clamp(), hingga kata kunci intrinsic. Semua sama-sama valid, tetapi tidak semua sama cocoknya untuk satu property — dan di sinilah letak keahlian sebenarnya. Chapter penutup section ini menyusun seluruh bekal itu menjadi peta keputusan: tabel rekomendasi per property, empat prinsip pemilihan, dan satu perbandingan kartu yang memperlihatkan bedanya secara langsung.

Peta Keputusan: Property ke Unit #

Tabel berikut merangkum kebiasaan yang sehat untuk property-property yang paling sering kita tulis:

Property	Rekomendasi	Alasan
`font-size`	`rem`	mengikuti preferensi ukuran font pengguna
`width`	`%` atau `max-width`; `ch` untuk panjang baris teks	mengikuti ruang induk, bukan angka tebakan
`border`	`px`	detail visual kecil yang tetap presisi saat zoom
`margin` / `padding`	`rem` untuk jarak antarkomponen, `em` untuk jarak internal	ikut membesar bersama ukuran font
section setinggi layar	`min-height: 100dvh`	`dvh` menyesuaikan address bar ponsel
tipografi fluid	`clamp(1rem, 0.9rem + 1vw, 1.5rem)`	fluid tanpa media query, tetap berbatas

Angka di tabel bukan hukum, melainkan titik berangkat. Yang penting adalah alasannya tetap: setiap unit yang kita pilih harus punya jawaban atas pertanyaan “nilai ini mengikuti apa?”

Empat Prinsip Pemilihan Unit #

Relatif secara default. Gunakan rem, %, dan vw untuk ukuran besar seperti lebar, tipografi, dan jarak, agar tampilan mengikuti preferensi pengguna dan ukuran induknya. Elemen yang mengikuti preferensi pengguna terasa nyaman dipakai, karena tampilannya bergerak ke arah yang sama dengan keinginan pengguna.
Absolut untuk detail kecil. px layak dipakai untuk border: 1px, radius kecil, dan shadow tipis — detail yang justru terlihat paling baik bila ukurannya konsisten di segala kondisi. Garis pembatas setebal 1px tidak perlu ikut membesar; yang perlu membesar adalah teks dan ruang di sekitarnya.
Jangan pernah menulis font-size dalam px. Pengguna yang menaikkan ukuran font dasar di pengaturan browser tidak terbantu oleh angka px yang mengabaikan preferensi itu; rem menghormatinya. Teks dekoratif sekalipun sebaiknya memakai rem agar seluruh skala huruf di halaman bergerak serasi.
Uji dengan zoom 200% dan font dasar lebih besar. Tekan Ctrl/Cmd plus untuk memperbesar halaman, lalu naikkan ukuran font bawaan browser. Layout yang baik tetap utuh: teks membesar, wadah mengikuti, tidak ada konten terpotong.

Cara Menguji Pilihan Unit #

Saat menguji, satu trik CSS membantu memperlihatkan batas setiap kotak tanpa mengubah layout:

css
/* Alat uji sementara: garis batas pada setiap elemen */
* {
  outline: 1px solid #d9d2c0;
}

Property outline digunakan karena ia tidak memakan ruang layout — setiap kotak mendapat garis batas tanpa posisi satu piksel pun bergeser. Dengan garis ini aktif, jalankan tiga pemeriksaan: perbesar halaman 200% dan pastikan tidak ada teks yang keluar dari kotaknya, naikkan ukuran font dasar browser dan perhatikan apakah jarak ikut membesar secara proporsional, lalu kecilkan jendela dan pastikan elemen menyusut dengan rapi alih-alih saling menumpuk. Setelah selesai menguji, hapus kembali aturan sementara ini.

Perbandingan penutup berikut menaruh dua kartu dengan markup dan teks yang identik — yang membedakan hanya pilihan unit pada CSS-nya. Versi pertama menulis semua angka dalam px tanpa pertimbangan, versi kedua memilih unit sesuai peta keputusan di atas:

css
/* Versi px sembarangan: semua angka dikunci */
.kartu-produk-px {
  width: 300px;          /* tidak peduli lebar induk */
  padding: 14px;         /* tidak ikut saat font berubah */
  font-size: 14px;       /* mengabaikan preferensi pengguna */
  border: 1px solid #9ed2b5;
  border-radius: 8px;
}

css
/* Versi terpilih: setiap unit punya alasan */
.kartu-produk {
  max-width: 20rem;          /* batas lebar, tetap boleh menyusut */
  padding: 1rem 1.25rem;     /* jarak ikut membesar bersama font */
  font-size: 0.875rem;       /* relatif ke root, hormati pengguna */
  border: 1px solid #9ed2b5; /* detail presisi memang di px */
  border-radius: 0.5rem;
}

Perbedaannya baru terasa saat pengguna menaikkan ukuran font dasar atau mengecilkan lebar halaman — saat itulah pilihan unit menentukan hasilnya.

Kesalahan Umum #

Kesalahan	Akibat	Perbaikan
`font-size` dalam `px`	preferensi ukuran font pengguna diabaikan	gunakan `rem`
semua jarak memakai `px`	layout tidak ikut menskala saat font berubah	`rem` antarkomponen, `em` internal komponen
`height: 100vh` untuk section penuh	bagian bawah tertutup address bar ponsel	gunakan `min-height: 100dvh`

Ringkasan #

Kemampuan memilih unit adalah soal memberi alasan pada setiap angka: rem untuk tipografi dan jarak, persen atau max-width untuk lebar, px untuk detail kecil, dvh untuk section setinggi layar, dan clamp() untuk ukuran fluid. Prinsipnya satu kalimat: relatif secara default, absolut untuk detail, dan selalu uji dengan zoom 200%. Section Values, Units, dan Sizing resmi tertutup di sini; pada section berikutnya kita membedah Box Model — kerangka content, padding, border, dan margin yang selama ini kita sebut-sebut di balik setiap ukuran.