Specificity: Siapa Menang Saat Aturan Bertabrakan

Masalah klasik: "kok style-ku tidak jalan?"

Kamu tulis color: red, tapi teksnya tetap biru. Hampir selalu penyebabnya adalah specificity: aturan lain punya skor lebih tinggi sehingga menang.

Cara menghitung skor

Setiap selektor punya skor tiga digit: (id, class, elemen).

• Selektor id (#nav) = (1, 0, 0)
• Selektor class (.menu), atribut, pseudo-class = (0, 1, 0)
• Selektor elemen (div), pseudo-element = (0, 0, 1)

Bandingkan dari kiri: id mengalahkan berapa pun class.

/* skor (0, 1, 0) */
.menu a { color: blue; }

/* skor (1, 0, 1) -> MENANG karena punya id */
#navigasi a { color: red; }

Contoh lain:

/* (0, 2, 1) */
nav.menu a { color: green; }

/* (0, 1, 2) -> kalah, karena 2 class > 1 class di digit tengah */
ul li a { color: purple; }

nav.menu a menang: digit pertama sama-sama 0, digit kedua 2 vs 1, jadi yang pertama menang tanpa peduli digit ketiga.

!important: palu godam

a {
  color: red !important;
}

!important mengalahkan semua specificity normal. Kedengarannya sakti, tapi ini awal bencana: sekali dipakai, satu-satunya cara mengalahkannya adalah !important lain yang ditulis belakangan atau lebih spesifik. Lama-lama stylesheet penuh palu godam dan tidak ada yang bisa diubah tanpa palu lebih besar.

Catatan teknis: ada tepat dua kasus !important yang bisa diterima: (1) utility class yang memang dirancang selalu menang (seperti .hidden di framework), dan (2) menimpa style library pihak ketiga yang tidak bisa diubah. Di luar itu, !important adalah tanda kamu menyerah memahami specificity. Perbaiki selektormu, jangan palu semuanya.

Cara menang tanpa !important

1. Naikkan specificity secara wajar: tambah satu class di rantai selektor.
2. Turunkan specificity lawan: refactor selektor yang terlalu kuat (misal ganti #id jadi .class).
3. Manfaatkan urutan: kalau skor seri, yang ditulis belakangan menang. Susun file CSS dari umum ke khusus.
4. Pakai :where() buat nol specificity: :where(.menu) a punya skor (0,0,1) saja, isi :where tidak dihitung.

/* skor (0, 0, 1): gampang ditimpa siapa pun */
:where(.menu) a {
  color: blue;
}

Melihat specificity di DevTools

Di panel Styles DevTools, aturan yang kalah akan dicoret. Aturan yang menang tampil utuh di atasnya. Kalau style-mu dicoret, lihat selektor pemenangnya dan hitung skornya. Sembilan dari sepuluh kasus "CSS tidak jalan" selesai dalam 30 detik dengan cara ini.

Rangkuman

Skor (id, class, elemen), bandingkan dari kiri. Id hampir selalu menang, makanya hindari styling pakai id. !important hanya buat dua kasus darurat. Saat style tidak jalan, buka DevTools dan lihat siapa yang dicoret: itulah petunjuknya.