CSS terlihat sederhana, tapi bug paling sulit di UI biasanya justru berasal dari CSS. Artikel ini fokus pada hal‑hal yang sering dianggap sepele, tapi krusial — bahkan saat sudah senior.
1) Cascade lebih penting dari yang kamu kira
Pada specificity yang sama, urutan rule menentukan hasil akhir. Banyak bug “warna random” berasal dari rule yang saling menimpa.
Cascade order
Urutan rule menentukan hasil akhir jika specificity sama.
Hasil
Tombol utama
Rule terakhir menang karena specificity sama.
Intinya: kalau specificity sama, rule terakhir menang. Kalau ingin stabil, buat convention urutan stylesheet dan hindari duplikasi rule di banyak tempat.
2) Box model adalah fondasi layout
Masalah paling sering: ukuran komponen tidak sesuai desain karena padding + border + content tidak dihitung dengan benar.
Box model
Ubah padding dan border untuk melihat ukuran box.
Intinya: selalu paham total ukuran sebuah elemen. Untuk layout konsisten, biasakan pakai box-sizing: border-box.
3) Layout modern: Flex dan Grid punya fungsi berbeda
Flex bagus untuk flow satu dimensi, Grid untuk layout dua dimensi. Jika salah pakai, spacing jadi berantakan dan sulit dirawat.
Layout vs gap
Bandingkan Flex dan Grid dengan gap yang sama.
Intinya: jangan memaksa Flex untuk layout 2D. Jika struktur kolom/row kompleks, Grid lebih bersih.
4) Specificity trap (class vs inline vs !important)
Saat bug muncul, jangan langsung pakai !important. Itu membuat maintainability turun.
Urutan umum:
- Inline style
- ID selector
- Class selector
- Element selector
Intinya: perbaiki struktur CSS dulu, bukan pakai !important sebagai solusi cepat.
5) Stacking context sering bikin “element hilang”
Jika elemen tidak muncul, kemungkinan:
- parent membuat stacking context baru (
transform,opacity,filter) - z-index tidak bekerja karena posisi
static
Intinya: cek parent chain sebelum menambah z-index.
6) Performance: CSS juga bisa berat
Yang sering bikin berat:
- blur besar
- box-shadow berlapis
- animasi pada property layout (top/left)
Intinya: animasikan transform dan opacity, bukan top/left.
7) Konsistensi desain lebih penting dari trik
CSS yang bagus bukan yang paling kompleks, tapi yang paling konsisten. Buat token untuk:
- spacing
- radius
- color
- shadow
Intinya: konsistensi mengurangi bug dan membuat UI terasa rapi.
Kesimpulan
CSS yang terlihat sederhana sebenarnya penuh jebakan: cascade, box model, dan layout adalah fondasi yang paling sering memunculkan bug. Jika tiga hal itu kuat, UI akan stabil, mudah dirawat, dan performanya lebih terkontrol.