Cascade, Specificity, & Inheritance

"Cascading": gaya yang berjatuhan

Huruf C pada CSS berarti Cascading. Kadang ada beberapa aturan yang menjangkau elemen yang sama dengan nilai berbeda. Browser harus memilih satu pemenang, dan ia memakai tiga pertimbangan berurutan:

1. Kepentingan (importance): deklarasi !important mengalahkan yang biasa.
2. Kekhususan (specificity): selector yang lebih spesifik menang.
3. Urutan: bila sama, aturan yang ditulis belakangan menang.

Specificity: skor selector

Bayangkan skor tiga kolom: (ID, Class, Elemen). Bandingkan kolom paling kiri dulu.

Pemenang ditentukan dari kolom kiri: satu ID mengalahkan seberapa banyak pun class; satu class mengalahkan seberapa banyak pun elemen. Pseudo-class (:hover) dihitung seperti class; pseudo-element (::before) seperti elemen; * tidak menambah skor.

p        { color: blue; }     /* 0,0,1 */
.teks    { color: green; }    /* 0,1,0  ← menang atas p */
#judul   { color: red; }      /* 1,0,0  ← menang atas keduanya */

Inheritance: pewarisan

Sebagian properti diwariskan dari induk ke anak, sebagian tidak.

• Diwariskan: color, font-family, font-size, line-height, text-align.
• Tidak diwariskan: margin, padding, border, background, width.

Karena itu cukup menulis body { font-family: ... } sekali, dan seluruh halaman mengikuti. Kamu bisa memaksa: inherit (ikuti induk), initial (nilai awal CSS), unset.

!important: gunakan dengan hemat

.teks { color: green !important; }

Ini mengalahkan hampir segalanya, tetapi membuat kode sulit ditimpa dan sulit dirawat. Anggap !important sebagai alat darurat, bukan solusi pertama. Bila gayamu "tidak mau berlaku", cek dulu specificity dan urutan.

Cara debug

Buka Inspect di browser, pilih elemen, dan lihat panel Styles: aturan yang kalah dicoret, dan kamu bisa melihat selector mana yang menang.