Lebih dari separuh kunjungan web di Indonesia datang dari HP. Responsive design artinya satu halaman yang sama menyesuaikan diri dengan lebar layar apa pun, tanpa membuat versi terpisah untuk HP dan laptop.

Mobile-first artinya kamu menulis gaya untuk layar kecil lebih dulu sebagai gaya dasar, lalu menambah aturan untuk layar yang lebih besar. Alasannya praktis: tampilan HP biasanya lebih sederhana (satu kolom), jadi lebih mudah dikembangkan ke tiga kolom daripada memangkas tiga kolom jadi satu. HP juga tidak perlu memproses aturan desktop yang lalu dibatalkan.

Sebelum media query bekerja dengan benar di HP, pasang tag ini di <head>:

<meta name="viewport" content="width=device-width, initial-scale=1">

Tanpa tag ini, browser HP berpura-pura layarnya selebar sekitar 980px lalu mengecilkan seluruh halaman. Hasilnya tulisan mungil dan media query untuk HP tidak pernah aktif. width=device-width menyuruh browser memakai lebar asli perangkat.

.container { width: 100%; padding: 16px; }

@media (min-width: 768px) {
  .container { width: 750px; margin: 0 auto; }
}

@media (min-width: 1024px) {
  .container { width: 980px; }
}

Baca dari atas: semua layar mendapat lebar 100%. Kalau lebar viewport minimal 768px, aturan kedua ikut berlaku dan menimpa. Kalau minimal 1024px, aturan ketiga menimpa lagi. Karena min-width, urutan di file harus dari kecil ke besar.

Breakpoint ini hanya patokan. Breakpoint terbaik dipilih saat konten mulai terlihat jelek, bukan berdasarkan merek perangkat. Ingat juga: gambar perlu max-width: 100%; height: auto; agar tidak meluber dari layar kecil.

Custom property (sering disebut CSS variable) adalah nilai bernama yang kamu definisikan sekali lalu pakai di banyak tempat.

:root {
  --warna-utama: #1572b6;
  --jarak: 16px;
  --radius: 8px;
}

.kartu {
  color: var(--warna-utama);
  padding: var(--jarak);
  border-radius: var(--radius);
}

Namanya wajib diawali dua tanda hubung dan peka huruf besar kecil. :root adalah elemen html, jadi variabel di sana bisa dipakai seluruh halaman. var() juga menerima nilai cadangan: var(--bayangan, none) dipakai bila --bayangan tidak didefinisikan.

Bedanya dengan variabel Sass: custom property hidup di browser dan ikut cascade. Artinya kamu bisa menimpanya di elemen tertentu, dan semua yang memakai variabel itu ikut berubah secara real-time. Inilah dasar tema gelap:

:root {
  --bg: #ffffff;
  --teks: #1a1a1a;
}
.gelap {
  --bg: #121212;
  --teks: #f0f0f0;
}
body {
  background: var(--bg);
  color: var(--teks);
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #121212; --teks: #f0f0f0; }
}

Tambahkan class gelap ke <html> lewat JavaScript, atau biarkan media query prefers-color-scheme mengikuti setelan sistem. Kamu tidak perlu menulis ulang aturan body, cukup ganti nilai variabelnya.

.konten { width: calc(100% - 40px); }
h1      { font-size: clamp(1.5rem, 4vw, 3rem); }
.box    { width: min(90%, 600px); }
.banner { height: max(200px, 20vh); }

• calc() mencampur satuan berbeda. Contoh di atas: lebar penuh induk dikurangi 40px. Operator + dan - wajib diapit spasi, calc(100%-40px) tidak valid.
• clamp(min, ideal, max) memakai nilai ideal, tapi tidak pernah di bawah min atau di atas max. Judul di atas ikut membesar dengan lebar layar, tapi tetap antara 24px dan 48px. Satu baris ini menggantikan beberapa media query.
• min() mengambil nilai terkecil. min(90%, 600px) berarti "90% dari induk, tapi maksimal 600px".
• max() mengambil nilai terbesar. max(200px, 20vh) berarti "minimal 200px".

Semua fungsi ini bisa bersarang dan menerima custom property, misalnya calc(var(--jarak) * 2).

Tiga properti ini untuk efek visual tanpa perlu edit gambar di aplikasi lain:

.foto-lama  { filter: grayscale(100%) blur(2px); }
.teks-hero  { mix-blend-mode: multiply; }
.avatar     { clip-path: circle(50%); }
.panah      { clip-path: polygon(0 0, 100% 50%, 0 100%); }

• filter menerapkan efek ke elemen: blur(), grayscale(), brightness(), contrast(), saturate(), drop-shadow(). Saudaranya, backdrop-filter, memburamkan area di belakang elemen untuk efek kaca.
• mix-blend-mode mencampur warna elemen dengan lapisan di belakangnya, seperti mode layer di aplikasi edit foto: multiply menggelapkan, screen mencerahkan.
• clip-path memotong elemen menjadi bentuk tertentu. Bagian di luar bentuk tidak terlihat dan tidak bisa diklik.

• Semantik dulu. Pakai <header>, <nav>, <main>, <article>, <button> sesuai maknanya. Pembaca layar dan mesin pencari memahami halamanmu dari tag ini.
• Kontras cukup. Teks normal butuh rasio kontras minimal 4.5:1 terhadap latarnya (standar WCAG AA). Abu-abu muda di atas putih sering gagal.
• Penamaan BEM ringkas. Block, Element, Modifier: .kartu, .kartu__judul, .kartu--sorot. Class jadi jelas asal-usulnya dan specificity tetap rendah karena semua cukup satu class.
• Hindari !important. Ia mengalahkan specificity normal, sehingga aturan berikutnya juga butuh !important, dan perang dimulai. Kalau gaya tidak berlaku, cek dulu specificity dan urutan aturan di DevTools.
• Satuan konsisten, rem untuk teks dan jarak, variabel untuk warna dan spasi, serta animasi yang ringan.

• Lupa meta viewport, sehingga media query untuk HP tidak pernah aktif di perangkat asli.
• Menulis media query min-width dari besar ke kecil, sehingga aturan kecil menimpa aturan besar.
• Menulis calc(100%-40px) tanpa spasi di sekitar tanda minus.
• Menulis var(warna-utama) tanpa dua tanda hubung.
• Menambal masalah specificity dengan !important di mana-mana.