Ketika dua aturan mengatur properti yang sama pada elemen yang sama, yang menang ditentukan specificity — dan ketika hasilnya tidak sesuai dugaan, kita perlu membuktikan perhitungannya, bukan menebaknya. Chapter ini melatih tiga keterampilan: membaca angka specificity langsung dari DevTools, melacak pemenang duel aturan pada halaman nyata, dan menurunkan specificity agar gaya mudah ditimpa kembali. Teori perhitungannya telah dibahas pada Chapter Specificity ; di sini fokusnya adalah pembuktian di lapangan.

Membaca Angka Specificity di DevTools #

Panel Styles DevTools menyertakan data yang sering terlewat: arahkan kursor ke sebuah selector, dan tooltip akan menampilkan angka specificity-nya dalam format tiga komponen — jumlah ID, jumlah class/atribut/pseudo-class, lalu jumlah type/pseudo-element. Selector #panel p.teks tampil sebagai (1, 1, 1); .teks tampil sebagai (0, 1, 0).

Prosedur membaca duel di panel Styles:

  1. Pilih elemen yang warnanya tidak sesuai dugaan, lalu buka panel Styles.
  2. Temukan semua aturan yang menyentuh properti yang dipermasalahkan — deklarasi yang kalah tampil tercoret, pemenangnya berada di atas.
  3. Arahkan kursor ke selector pemenang dan pembalapnya, bandingkan angka di tooltip: pemenang harus punya angka yang lebih tinggi dari kiri ke kanan, atau sama dengan urutan sumber lebih akhir.
  4. Bila tidak ada dua aturan yang “berebut”, periksa kecocokan selector — aturan yang tidak cocok tidak muncul di panel sama sekali.

Perhatikan satu jebakan umum: specificity dihitung per selector, bukan per aturan. Pada selector list seperti p, .teks, masing-masing bagian dihitung terpisah.

Membuktikan Dua Duel pada Demo #

Demo chapter ini menyusun dua duel dengan pemenang berbeda:

css duel-specificity.html (cuplikan) 
p { color: rgb(30, 41, 59); }              /* (0,0,1) */
.teks { color: rgb(2, 132, 199); }         /* (0,1,0) */
#panel p.teks { color: rgb(185, 28, 28); } /* (1,1,1) */

Mari kita telaah hasilnya pada tiga elemen:

  1. Paragraf tanpa class: hanya p yang cocok, sehingga warnanya rgb(30, 41, 59) — tidak ada duel.
  2. Paragraf di luar panel dengan class teks: p dan .teks sama-sama cocok; angkanya (0,0,1) melawan (0,1,0), class unggul di komponen tengah, jadi pemenangnya biru rgb(2, 132, 199).
  3. Paragraf di dalam #panel dengan class teks: tiga selector cocok sekaligus. #panel p.teks membawa angka (1,1,1) — komponen ID membuatnya tak terkalahkan oleh class — sehingga merah tua rgb(185, 28, 28) yang menang, meskipun ditulis lebih awal daripada aturan lain.

Hasil di Browser:

text 
Paragraf tanpa class tampil gelap rgb(30, 41, 59). Paragraf class teks
di luar panel tampil biru rgb(2, 132, 199) — class mengalahkan type.
Paragraf class teks di dalam #panel tampil merah tua rgb(185, 28, 28) —
ID pada selector pemenang mengungguli class saja.

Strategi Perbaikan: Turunkan, Jangan Paksa #

Setelah pemenang terbukti, perbaikan yang sehat menurunkan specificity aturan bermasalah — bukan menaikkan aturan lawannya dengan !important, yang hanya memindahkan duel ke tingkat berikutnya. Alat paling langsung adalah pseudo-class :where() , yang selalu menyumbang nol terhadap specificity:

css duel-specificity.html (cuplikan) 
:where(#panel) .teks-hijau { color: rgb(22, 163, 74); } /* (0,1,0) */
.teks-hijau.penting { color: rgb(101, 163, 13); }        /* (0,2,0) menang */

Tanpa :where, aturan dasar #panel .teks-hijau akan berangka (1,1,0) dan tidak dapat ditimpa oleh class mana pun. Dengan :where(#panel), hubungan DOM tetap tersurat — aturan hanya berlaku di dalam panel — tetapi angkanya turun menjadi (0,1,0), sehingga variasi seperti .teks-hijau.penting (0,2,0) bebas menimpanya. Pada demo, paragraf hasil perbaikan tampil hijau zaitun rgb(101, 163, 13), bukti bahwa penimpaan berhasil tanpa satu pun !important.

Dengan pemenang dapat dibuktikan dan specificity dapat diturunkan, kasus debugging berikutnya lebih mendasar lagi: aturan yang bahkan tidak valid untuk diproses browser.