Specificity dan Source Order

Ketika satu elemen ditunjuk oleh beberapa deklarasi dari origin yang sama, cascade melanjutkan penilaiannya ke dalam origin tersebut. Penentu pertama adalah specificity: bobot yang dihitung dari komposisi selector. Bila dua deklarasi ternyata sama kuat, cascade memeriksa source order, yaitu posisi aturan dalam urutan penulisan stylesheet. Dua mekanisme ini menjawab sebagian besar pertanyaan “mengapa gaya saya tidak berlaku”, dan pada Chapter ini kita mengujinya satu per satu lewat demo yang dapat diverifikasi otomatis.

Specificity: Penentu Kedua dalam Cascade #

Specificity ditulis sebagai tiga komponen (a, b, c): jumlah ID, jumlah class/attribute/pseudo-class, dan jumlah type/pseudo-element. Perbandingan dilakukan dari komponen kiri ke kanan, sehingga (1, 0, 0) mengalahkan (0, 99, 0). Formula lengkap, aturan :is(), dan :where() telah kita bedah tuntas pada Chapter Specificity ; rujukan resminya ada di MDN Specificity . Untuk keperluan cascade, tabel singkat ini cukup:

Di dalam origin yang sama, deklarasi dengan specificity lebih tinggi selalu menang — bahkan bila aturan tersebut ditulis lebih awal. Specificity menimbang kualitas selector, bukan posisi penulisannya.

Source Order: Pemenang Terakhir #

Bila dua deklarasi yang cocok ternyata sama kuat, cascade memeriksa source order: deklarasi yang muncul belakangan dalam urutan sumber menang. “Urutan sumber” dibaca dari atas ke bawah pada satu file, dan antar-file mengikuti urutan <link> atau @import pada dokumen.

.satu { color: rgb(13, 148, 136); }
.dua { color: rgb(220, 38, 38); } /* sama kuat, ditulis belakangan → menang */

Konsekuensi praktisnya: aturan penimpa (override) sebaiknya diletakkan di bawah aturan dasar, dan media query untuk layar kecil biasanya ditaruh di akhir file agar menimpa gaya dasar tanpa perlu specificity tambahan. Source order juga menjadi alasan umum sebuah perubahan “tidak mau berlaku”: kita menambahkan aturan baru di atas, padahal aturan lama yang sama kuat menimpanya dari bawah.

Kebiasaan yang menjaga source order tetap dapat dibaca: kelompokkan aturan per komponen dalam satu lokasi, hindari menyebar aturan untuk selector yang sama ke banyak file, dan hindari selector identik yang dideklarasikan dua kali — saat selector persis sama ditulis dua kali, hanya deklarasi terakhir yang berpengaruh. Panel Styles DevTools menampilkan aturan sesuai urutan sumbernya, sehingga posisi relatif dua aturan mudah diperiksa langsung di browser.

Inline Style dan !important pada Puncak Origin Author #

Atribut style membuat deklarasi menempel langsung pada elemen. Dalam cascade, deklarasi inline berada di atas seluruh selector author untuk deklarasi normal — selector ID sekalipun kalah. Satu-satunya yang mengalahkan inline style adalah deklarasi !important dari origin author.

Demo chapter ini menguji empat duel sekaligus:

/* Duel 1: specificity mengalahkan source order */
p.teks { color: rgb(2, 132, 199); }
.teks  { color: rgb(13, 148, 136); }

/* Duel 2: specificity sama, source order menentukan */
.satu { color: rgb(13, 148, 136); }
.dua  { color: rgb(220, 38, 38); }

/* Duel 3 dan 4: inline style versus selector id dan !important */
#utama { color: rgb(220, 38, 38); }
.teks-penting { color: rgb(21, 128, 61) !important; }

<p class="teks">Paragraf 1</p>
<p class="satu dua">Paragraf 2</p>
<p id="utama" style="color: rgb(124, 58, 237);">Paragraf 3</p>
<p class="teks-penting" style="color: rgb(124, 58, 237);">Paragraf 4</p>

Hasil di Browser:

Paragraf 1 tampil biru (color: rgb(2, 132, 199)): p.teks (0,1,1) menang atas
.teks (0,1,0) meskipun .teks ditulis belakangan.
Paragraf 2 tampil merah (color: rgb(220, 38, 38)): specificity sama, aturan
.dua yang ditulis belakangan menang.
Paragraf 3 tampil ungu (color: rgb(124, 58, 237)): inline style mengalahkan
selector id #utama (1,0,0).
Paragraf 4 tampil hijau (color: rgb(21, 128, 61)): deklarasi !important
mengalahkan inline style ungu.

Mari kita telaah keempat duel tersebut:

1. Duel 1: .teks ditulis belakangan, tetapi bobotnya lebih rendah. Specificity diperiksa lebih dulu oleh cascade, sehingga biru dari p.teks yang tampil.
2. Duel 2: .satu dan .dua sama-sama (0, 1, 0). Tidak ada pemenang dari specificity, sehingga source order mengambil alih dan merah menang.
3. Duel 3: deklarasi inline style="color: ..." diperlakukan berada di atas semua selector author, sehingga ungu menimpa aturan #utama.
4. Duel 4: !important memindahkan deklarasi ke jalur penting yang lebih tinggi daripada deklarasi inline normal, sehingga hijau menang.

Demo lengkap membawa atribut data-expected pada keempat paragraf, sehingga hasil keempat duel diverifikasi otomatis oleh harness Course. Setelah specificity dan source order habis dipakai, cascade masih menyisakan satu sumber nilai: warisan dari elemen induk, yang kita bahas pada Chapter Inheritance .