Cascade dan Inheritance

Dari mana style sebuah elemen berasal?

Nilai akhir tiap properti ditentukan lewat tiga mekanisme: cascade (aturan mana yang menang), inheritance (warisan dari induk), dan nilai default browser.

Cascade: urutan kemenangan

Saat beberapa aturan menyasar properti yang sama, pemenangnya ditentukan berurutan:

1. !important mengalahkan yang normal
2. Specificity lebih tinggi menang
3. Urutan: kalau seri, yang ditulis paling bawah menang
4. Origin: style browser < style penulis < style pengguna (umumnya tidak perlu dipikirkan)

p { color: blue; }
p { color: red; } /* menang: specificity seri, ditulis belakangan */

Inilah alasan framework CSS dimuat sebelum stylesheet kustommu: supaya aturanmu (yang ditulis belakangan) bisa menimpa framework tanpa perang specificity.

Inheritance: warisan otomatis

Sebagian properti diwariskan otomatis dari induk ke anak: color, font-family, font-size, line-height, text-align. Makanya cukup tulis sekali di body:

body {
  font-family: "Inter", sans-serif;
  color: #1e293b;
  line-height: 1.6;
}

Semua teks di halaman otomatis mewarisinya tanpa perlu ditulis ulang per elemen.

Sebagian lagi tidak diwariskan: margin, padding, border, background, width. Bayangkan kalau margin diwariskan: semua anak dapat margin induknya, kacau.

Kata kunci kontrol warisan

.khusus {
  color: inherit;  /* paksa mewarisi dari induk */
}

.reset {
  color: initial;  /* kembali ke nilai default spesifikasi */
}

.cerdas {
  color: unset;    /* inherit kalau bisa diwarisi, initial kalau tidak */
}

• inherit: ambil nilai dari induk, berguna buat properti yang normalnya tidak diwariskan (misal paksa link mewarisi warna teks: a { color: inherit; })
• initial: kembalikan ke bawaan spesifikasi CSS
• unset: kombinasi cerdas keduanya

Contoh praktis: link mewarisi warna

/* link tidak lagi biru default, mengikuti warna teks sekitarnya */
a {
  color: inherit;
  text-decoration: underline;
}

Pola ini populer di desain modern yang tidak mau link biru klasik merusak palet warna.

Catatan teknis: properti custom (variabel CSS, --warna) selalu diwariskan ke keturunan. Ini sengaja dan sangat berguna: definisikan variabel di :root dan seluruh halaman bisa memakainya. Detailnya ada di modul variabel CSS.

Rangkuman

Cascade menentukan aturan mana yang menang (important > specificity > urutan). Inheritance menghemat penulisan buat properti teks: tulis sekali di body. Kontrol paksa dengan inherit/initial/unset saat butuh perilaku khusus.