StylingCSSStylingDevTools5 mnt baca

CSS Tidak Berpengaruh: Specificity, Urutan, dan Cache

Ubah CSS tapi tampilan tidak berubah sama sekali. Tiga penyebab paling umum dan cara memeriksanya di DevTools.

1 · Gejala & Log Pesan Error

error.log

// tidak ada error di console. Gejalanya:
// - warna / layout tidak berubah setelah edit CSS
// - style hanya berubah setelah !important (lalu berantakan)
// - di DevTools, properti CSS terlihat dicoret (strikethrough)

2 · Akar Penyebab Masalah

Browser Tidak Pernah "Mengabaikan" CSS Tanpa Alasan

Kalau style tidak terlihat, hampir pasti salah satu dari tiga ini:

Kalah specificity: selector lain yang lebih spesifik menimpa aturanmu. ID (#) mengalahkan class (.), class mengalahkan tag. Inline style mengalahkan semuanya kecuali !important.
Kalah urutan: dua selector dengan specificity sama, yang ditulis terakhir yang menang. File CSS yang di-load belakangan menimpa yang duluan.
File lama yang ke-cache: browser memakai CSS versi kemarin dari cache, padahal file di disk sudah baru. Sangat umum dan sangat menjebak.

Properti yang dicoret di DevTools = properti itu kalah dan tidak dipakai. Itu petunjuk paling jujur.

3 · Solusi & Diff Kode

✕ Sebelum (bermasalah)

before

/* ❌ tidak mempan: kalah specificity dari #header .nav a */
.nav a {
  color: red;
}

/* file lain, specificity lebih tinggi */
#header .nav a {
  color: blue; /* ini yang menang */
}

✓ Sesudah (diperbaiki)

after

/* ✔ samakan atau lampaui specificity dengan jujur */
#header .nav a {
  color: red;
}

/* ATAU turunkan specificity penimpanya kalau memungkinkan.
   Jangan kabur ke !important: ia "menang" hari ini dan
   jadi utang yang menyiksa minggu depan. */

Langkah Perbaikan

Buka DevTools → tab Styles: klik elemennya, lihat properti yang dicoret. Di atasnya tertulis selector pemenangnya. Itulah lawanmu.
Hard refresh dulu: Ctrl+Shift+R (Windows) atau Cmd+Shift+R (Mac). Kalau tiba-tiba berubah, masalahnya cuma cache.
Cek file ke-load atau tidak: tab Network → filter CSS → pastikan file-mu status 200, bukan 404 atau versi lama.
Perbaiki specificity dengan benar: samakan konteks selector atau sederhanakan struktur. !important hanya untuk darurat, bukan kebiasaan.
Untuk Tailwind: class yang tidak muncul biasanya karena nama class-nya dinamis (dibangun pakai string concat) sehingga tidak terdeteksi saat build. Tulis class lengkap secara literal.