Spacing Variables

Mata pengunjung mungkin tidak mengukur jarak, tetapi mereka merasakan hasilnya: halaman dengan jarak yang berirama terasa rapi, sedangkan halaman dengan angka seadanya — 13px di sini, 22px di sana — terasa goyah tanpa sebab yang jelas. Masalahnya bukan ketidakmampuan menghitung, melainkan terlalu banyak keputusan kecil yang diambil berulang-ulang. Skala spasi dalam custom properties membatasi pilihan ke beberapa tingkat yang sudah dirancang, sehingga setiap margin, padding, dan gap otomatis selaras.

Skala Spasi Berbasis 4 Piksel #

Konvensi yang paling luas dipakai menurunkan seluruh skala dari basis 0.25rem — setara 4px pada ukuran font root bawaan 16px. Setiap tingkat adalah kelipatannya, dengan langkah yang melebar makin ke atas:

:root {
  --spasi-1: 0.25rem;
  --spasi-2: 0.5rem;
  --spasi-3: 0.75rem;
  --spasi-4: 1rem;
  --spasi-5: 1.5rem;
  --spasi-6: 2rem;
  --spasi-7: 3rem;
  --spasi-8: 4rem;
}

Satuan rem dipilih dengan sengaja, sebagaimana kita bahas pada chapter em dan rem: mengikuti preferensi ukuran font pengguna, sehingga pengguna yang memperbesar font juga mendapat jarak yang ikut membesar. Berikut panduan pemakaiannya:

Skala ini bekerja sebagai alat keputusan: saat komponen butuh ruang “sedikit lebih banyak”, jawabannya adalah token berikutnya, bukan angka buatan. Konsistensi antar komponen datang gratis karena semua orang — termasuk kita sendiri enam bulan kemudian — memilih dari delapan pilihan yang sama, bukan dari tak berhingga angka piksel.

Memakai Skala di margin, padding, dan gap #

Setelah skala ada, tiga property jarak utama tinggal menarik dari token yang sama:

.kartu-produk {
  padding: var(--spasi-4);
  border: 1px solid #e2e8f0;
  border-radius: 12px;
}

.kartu-produk + .kartu-produk {
  margin-top: var(--spasi-5);
}

.daftar-tag {
  display: flex;
  gap: var(--spasi-2);
}

Semua angka berasal dari satu sumber. Manfaat terbesarnya bukan pada satu komponen, melainkan pada halaman utuh: jarak vertikal antar blok mengikuti pola yang konsisten, dan itulah yang sering disebut vertical rhythm.

Demo berikut memakai skala untuk padding, margin, dan gap sekaligus, termasuk variabel lokal --jarak-dalam:

Perbesar ukuran font di pengaturan browser: seluruh jarak ikut membesar karena satuannya rem.

Kombinasi dua token dalam satu shorthand juga wajar: padding: var(--spasi-2) var(--spasi-4) memberi ruang vertikal yang rapat dan horizontal yang lapang, dengan kedua angka tetap dari keluarga yang sama. Kasus khusus yang benar-benar tidak tersedia di skala bisa dihitung dengan calc(): calc(var(--spasi-4) * 1.5) menghasilkan 24px tanpa memecah keluarga angka. Gunakan secukupnya — bila satu hitungan mulai muncul di banyak tempat, itu tanda tingkat baru perlu ditambahkan ke skala.

Variabel Spasi Lokal Komponen #

Skala global menyimpan nilai; komponen tetap boleh punya nama semantiknya sendiri. Pola yang lazim: komponen mendeklarasikan variabel lokal yang menunjuk skala, lalu memakai nama lokalnya di seluruh aturan komponen:

.kartu-artikel {
  --jarak-dalam: var(--spasi-4);
  padding: var(--jarak-dalam);
}

.kartu-artikel .aksi {
  margin-top: var(--jarak-dalam);
}

Bila desainer memutuskan kartu artikel perlu lebih longgar, kita mengubah satu penunjuk ke var(--spasi-5) dan padding serta margin ikut sekaligus — tanpa menyentuh skala global yang dipakai komponen lain.

Dua kartu berikut hanya berbeda pada nilai --jarak-dalam:

Ringkasan #

Skala spasi mengubah ratusan keputusan jarak menjadi delapan token berbasis 0.25rem, dipakai konsisten di margin, padding, dan gap. Komponen bisa menambahkan variabel lokal semantik seperti --jarak-dalam yang menunjuk skala, sehingga penyesuaian per komponen tetap satu langkah. Dengan warna dan jarak yang terkunci dalam token, sasaran berikutnya adalah tipografi — token ukuran, font stack, dan tinggi baris.