Pernah nulis CSS yang "harusnya warna merah" tapi ternyata muncul biru di browser? Lalu kamu coba kasih !important, eh ternyata ada !important lain yang lebih kuat juga? Welcome ke dunia specificity — sistem peringkat CSS yang nentuin selector mana yang menang pas bentrok. Bukan urutan tulis yang menentukan — tapi "berat" selector-nya. Ini sumber confusion paling klasik di CSS, dan begitu kamu paham aturannya, debugging styling jadi 10x lebih cepat.

💡 Senjata pamungkas modern: @layer. !important sering jadi awal dari "perang !important" (nubie taro !important, dev senior taro !important !important style class baru, dst). Tahun 2022 CSS akhirnya nyediain solusi proper: CSS Cascade Layers (@layer reset, base, components, utilities). Layer yang ditulis belakangan menang otomatis — gak peduli specificity. Tailwind v3+ pake ini buat solve konflik library vs custom style. !important jadi senjata terakhir, bukan rutinitas.

Bobot spesifisitas dihitung dengan format (a, b, c) — diibaratkan tiga kolom angka:

Urutan spesifisitas dari rendah ke tinggi:

1. Element selector (p, div, h1) — bobot 0-0-1
2. Class selector (.nama-class) — bobot 0-1-0
3. ID selector (#nama-id) — bobot 1-0-0
4. Inline style (style="...") — mengalahkan semua selector
5. !important — mengalahkan segalanya (hindari penggunaan)

p { color: blue; }           /* 0-0-1 */
.teks { color: green; }      /* 0-1-0, lebih tinggi */
#judul { color: red; }       /* 1-0-0, paling tinggi */

Jika spesifisitas sama, aturan yang ditulis terakhir yang menang (cascade).

p { color: blue; }
p { color: red; } /* Yang ini menang */

🎭 Analogi sehari-hari

Specificity = kasta penilai juri lomba. Inline style = juri presiden (paling tinggi). #id = juri mentor. .class = juri biasa. tag = juri kategori. !important = wakil presiden yang langsung override semua. Saat banyak juri kasih nilai berbeda, kasta tertinggi yang menang.

⚠️ Jebakan yang sering ditemui

• !important perang — sekali pakai !important, satu-satunya cara override adalah !important lain dengan specificity lebih tinggi. Lubang yang menggali sendiri.
• ID selector mengunci tema — #header { color: red } butuh #header.dark (1, 1, 0) untuk override. Pakai class saja.
• Cascade ≠ specificity — kalau spesifisitas berbeda, urutan tulis tidak berpengaruh. Class selector di atas selalu kalah dari ID selector di bawah.
• Universal * dan :where() punya bobot 0 — :where(.btn) sama spesifisitasnya dengan *, gampang di-override.
• Cascade Layers (@layer) mengalahkan specificity antar-layer — layer yang dideklarasi lebih akhir menang, terlepas dari bobot selector.

TL;DR: Specificity itu sistem peringkat selector saat bentrok. Format (a, b, c) = (jumlah ID, jumlah class/attr/pseudo, jumlah element). Bandingkan kolom per kolom kiri → kanan. Inline style menang dari semua selector. !important overrides everything (hindari, pakai @layer modern). Specificity sama → urutan tulis menentukan.