CSS 02B: Cascade, Inheritance, dan Specificity

Ketika beberapa aturan menargetkan elemen yang sama, browser harus memilih pemenang. Proses inilah yang menjadi bagian dari cascade.

1. Urutan Aturan dan Inheritance

Jika kekuatan selector sama, aturan yang ditulis paling akhir menang. Beberapa property teks juga diwariskan dari induk ke anak.

Property seperti color dan font-family umumnya diwariskan. margin, padding, dan border umumnya tidak diwariskan.

2. Specificity

Urutan kekuatan sederhana adalah selector elemen, class, ID, kemudian inline style.

Jangan sengaja memakai ID hanya untuk memenangkan konflik. Selector yang terlalu kuat akan menyulitkan perawatan.

3. Hindari !important sebagai Jalan Pintas

Penulisan color: blue !important; mengubah prioritas cascade dan sering memicu perang aturan. Gunakan hanya untuk kasus yang benar-benar terkendali, bukan untuk memperbaiki selector yang belum dipahami.

Strategi Debugging

1. Pilih elemen melalui DevTools.
2. Cari deklarasi yang dicoret.
3. Periksa selector pemenang dan sumber aturannya.
4. Sederhanakan selector atau susun ulang aturan.
5. Hindari menambah !important sebelum memahami penyebabnya.

Latihan

Pada contoh specificity, hapus selector ID lalu perhatikan warna yang menang. Setelah itu, balik urutan selector elemen dan class. Gunakan DevTools untuk melihat deklarasi yang dicoret.

Rangkuman

Cascade mempertimbangkan asal, kepentingan, specificity, dan urutan. Inheritance menyebarkan sebagian nilai dari induk. Memahami ketiganya jauh lebih baik daripada mengandalkan !important.