Ada dua urutan berpikir saat menulis CSS responsif: mulai dari desktop lalu mengecilkan, atau mulai dari ponsel lalu memperkaya. Pendekatan mobile first memilih urutan kedua — kita menulis gaya dasar tanpa media query yang memang bekerja untuk layar kecil, kemudian menambahkan @media (min-width: ...) sebagai lapisan enhancement untuk tablet dan desktop. Urutan ini bukan sekadar selera: pendekatan ini mengarahkan prioritas konten, menjaga CSS tetap teratur, dan menguntungkan perangkat dengan ruang serta daya olah paling terbatas. Pada Chapter ini kita membandingkan kedua urutan tersebut dan mempraktikkannya lewat satu komponen kartu.

Mobile First vs Desktop First #

Keduanya menghasilkan tampilan akhir yang sama, tetapi arah penulisannya berlawanan:

css 
/* Desktop first: memulai dari lebar penuh, lalu mengecilkan */
.tautan-nav { display: inline-block; }
@media (max-width: 767px) {
  .tautan-nav { display: block; }
}

/* Mobile first: memulai dari layar kecil, lalu memperkaya */
.tautan-nav { display: block; }
@media (min-width: 768px) {
  .tautan-nav { display: inline-block; }
}

Mari kita bandingkan kedua versi tersebut:

  1. Versi desktop first: gaya utama ditulis untuk layar besar, kemudian max-width: 767px menimpa gaya itu untuk ponsel. Browser ponsel tetap membaca seluruh gaya dasar meskipun sebagian besar kemudian ditimpa.
  2. Versi mobile first: gaya utama ditulis untuk ponsel, kemudian min-width: 768px menambahkan perilaku baru di layar lebar. Browser ponsel hanya menerapkan gaya dasar; blok media query dilewati karena kondisinya tidak terpenuhi.
  3. Arah logika: menimpa gaya (desktop first) memerlukan perhatian pada specificity dan urutan, sedangkan menambah gaya (mobile first) jarang menimbulkan konflik karena setiap lapisan hanya memperluas lapisan sebelumnya.

Keuntungan Pendekatan Mobile First #

Prioritas konten. Ruang 360px memaksa kita memilih apa yang benar-benar penting. Ketika konten inti tampil baik di ponsel, versi desktop hanya soal menata ulang ruang yang melimpah — bukan soal membuang fitur.

Performa. Pada perangkat berdaya olah rendah, blok @media (min-width: ...) yang tidak aktif dilewati browser, sehingga yang dievaluasi hanyalah gaya dasar. Kebiasaan ini juga menahan kita menambahkan dekorasi berat untuk layar kecil yang tidak perlu.

CSS lebih teratur. Struktur file mengikuti skala: gaya dasar, lalu 768px, lalu 1024px. Setiap blok media query hanya berisi perubahan, bukan pengulangan seluruh komponen.

Pendekatan ini juga memandu arah refactor. Ketika file CSS lama masih desktop first, cara berpindah yang paling aman adalah memindahkan gaya yang ditimpa oleh max-width menjadi gaya dasar, lalu mengubah blok penimpanya menjadi min-width. Hasil visualnya identik, tetapi arah logikanya kini mengalir dari kecil ke besar — dan blok yang tersisa jauh lebih pendek.

Contoh: Kartu Mobile First #

Demo chapter ini menampilkan dua kartu. Kartu pertama murni gaya dasar; kartu kedua sama persis tetapi menerima satu blok enhancement:

css 
.kartu {
  max-width: 420px;
  padding: 16px;                                /* gaya dasar: ponsel */
  background: rgb(255, 255, 255);
  border: 1px solid rgb(226, 232, 240);
  border-left: 4px solid rgb(148, 163, 184);
}
.kartu h2 { font-size: 16px; }

@media (min-width: 768px) {
  .kartu {
    padding: 32px;
    border-left-color: rgb(22, 163, 74);
  }
  .kartu h2 { font-size: 18px; }
}

Mari kita telaah potongan di atas:

  1. .kartu (di luar media query): seluruh deklarasi di sini adalah gaya dasar — padding 16px, warna, dan garis kiri abu-abu. Bagian inilah yang diterima pengguna ponsel tanpa pengecualian.
  2. @media (min-width: 768px): kondisi berbunyi “viewport minimal 768px”; di bawah nilai itu seluruh blok diabaikan.
  3. Deklarasi di dalam blok: hanya nilai yang berubah — padding membesar ke 32px, garis kiri menjadi hijau, judul naik ke 18px. Sisa gaya diwarisi dari lapisan dasar tanpa ditulis ulang.

Hasil di Browser:

text 
Pada viewport harness 1280px: kartu mobile first ber-padding 32px dengan garis
kiri hijau rgb(22, 163, 74) dan judul 18px; kartu dasar tetap ber-padding 16px
dengan garis kiri abu-abu rgb(148, 163, 184).
Bila file demo dibuka di ponsel (viewport di bawah 768px), kartu mobile first
turun ke padding 16px — identik dengan gaya dasarnya.

Pendekatan mobile first memberi kita kerangka kerja; alat utamanya adalah media query. Chapter berikutnya membedah sintaks @media secara lengkap: kondisi and, not, koma, hingga media features di luar lebar layar.