Ada sebuah momen yang sampai sekarang masih bikin saya senyum-senyum sendiri kalau mengingatnya. Waktu itu saya sedang bikin halaman web pertama yang agak serius — bukan cuma latihan, tapi memang mau dipakai. Saya sudah berjam-jam mengerjakan layout-nya, dan hasilnya di laptop saya kelihatan sempurna.

Lalu istri saya buka halaman yang sama di HP-nya. Dan tampilannya... berantakan total. Teks keluar dari kotak. Tombol numpuk. Gambar melebar melewati layar. Seperti ada yang melempar semua elemen ke layar tanpa aturan.

Saya tidak tahu apa itu responsive design waktu itu. Benar-benar tidak tahu.

Kesalahan Pertama: Mengabaikan Mobile

Waktu saya mulai belajar HTML dan CSS, semua contoh tutorial yang saya temukan dibuat untuk tampilan desktop. Lebar fixed, ukuran pixel yang spesifik, tidak ada media query. Saya pun ikutin tanpa bertanya kenapa.

Pelajaran yang akhirnya saya dapat setelah kejadian itu: selalu mulai desain dari layar kecil, baru perbesar. Ini yang disebut mobile-first approach, dan saya baru benar-benar paham maknanya setelah melihat website saya berantakan di HP.

Sekarang saya selalu tambahkan ini di bagian atas CSS:

* {
box-sizing: border-box;

}


img, video {

max-width: 100%;

height: auto;

}

Dua aturan ini saja sudah mencegah banyak masalah layout yang saya alami dulu.

Kesalahan Kedua: Melawan Browser, Bukan Bekerja Sama

Ada fase di mana saya begitu sering menulis CSS dengan semangat "override semua". Setiap browser punya default style sendiri, dan saya menghapus semua default itu dengan reset CSS yang agresif — margin nol, padding nol, semuanya dari awal.

Hasilnya memang bersih. Tapi saya akhirnya menghabiskan waktu berjam-jam mengembalikan style-style yang seharusnya ada — seperti spacing antar paragraf, style default untuk link, ukuran heading yang proporsional. Semua itu sudah disediakan browser secara gratis, dan saya malah menghapusnya sendiri.

Sekarang saya lebih suka normalize.css daripada reset penuh. Normalize menyamakan perbedaan antar browser, tapi tidak menghapus default yang berguna.

Kesalahan Ketiga: Terlalu Banyak Class

Ini kesalahan yang banyak dilakukan orang yang baru belajar CSS, termasuk saya. Setiap elemen punya class sendiri. Ada .teks-merah, .margin-kiri-10, .font-besar — semua utility class yang dibuat sendiri dengan penamaan yang tidak konsisten.

Waktu project berkembang, CSS-nya menjadi mimpi buruk. Tidak ada yang tahu class mana yang masih dipakai dan mana yang sudah tidak relevan. Mengubah satu hal bisa memecah hal lain yang tidak terduga.

Solusinya bukan pakai framework. Solusinya adalah belajar mengelompokkan style berdasarkan komponen, bukan berdasarkan tampilan visual. Nama class yang bagus menggambarkan apa fungsinya, bukan bagaimana tampilannya.

Flexbox Mengubah Cara Saya Melihat Layout

Sebelum kenal Flexbox, saya pakai float untuk layout. Dan siapa yang pernah debugging layout berbasis float tahu betapa menyiksanya itu — elemen yang collapse, clearfix yang misterius, dan hal-hal yang bekerja tanpa kamu benar-benar tahu kenapa.

Waktu pertama kali coba Flexbox dan berhasil membuat dua kolom yang sama tinggi hanya dengan display: flex, rasanya seperti sulap. Serius. Saya coba lagi beberapa kali karena tidak percaya semudah itu.

Sekarang Flexbox adalah tool utama saya untuk layout satu dimensi, dan CSS Grid untuk layout dua dimensi. Keduanya sudah didukung semua browser modern dan tidak butuh library tambahan apapun.

CSS itu dalam. Lebih dalam dari yang kebanyakan orang kira. Saya masih terus belajar sampai sekarang — masih sering ketemu properti atau teknik yang belum pernah saya coba sebelumnya.

Tapi justru itu yang bikin menarik. Selalu ada hal baru untuk dieksplorasi.

Kamu punya kesalahan CSS yang paling berkesan? Yang waktu kamu temukan penyebabnya, kamu tepuk jidat dan bilang "Ya ampun, ternyata itu..." — cerita di komentar. Saya yakin banyak yang akan bisa tertawa dan belajar dari cerita itu.