Cascade CSS

Nama lengkap CSS adalah Cascading Style Sheets, dan kata cascading di dalamnya bukan sekadar hiasan. Pada halaman nyata, satu elemen hampir selalu menjadi target banyak aturan sekaligus: aturan dari berkas CSS kita, dari library pihak ketiga, dari tema, bahkan dari stylesheet bawaan browser. Bila dua aturan mengatur property yang sama dengan nilai berbeda, browser tidak menerapkan keduanya, melainkan memilih satu pemenang. Mekanisme pemilihan pemenang itulah yang disebut cascade — penguasaannya membuat hasil CSS kita selalu bisa diprediksi.

Kapan Cascade Bekerja #

Cascade hanya bekerja pada satu kondisi: ada lebih dari satu declaration yang menargetkan elemen yang sama dan property yang sama. Perhatikan dua rule berikut:

css
.panel-sambutan {
  color: #1d4ed8;
}

.panel-sambutan {
  color: #14503a;
}

Kedua declaration menargetkan property color pada elemen yang sama, tetapi nilainya berbeda, sehingga keduanya bersaing. Browser menilai keduanya lewat cascade lalu menerapkan satu nilai saja pada elemen:

Deklarasi pertama tetap terbaca oleh browser; ia hanya kalah dalam penilaian cascade.

Bandingkan dengan kondisi yang tidak memicu cascade:

css
.panel-sambutan {
  color: #14503a;
  font-size: 17px;
}

Property color dan font-size tidak bersaing karena masing-masing hanya punya satu deklarasi, sehingga keduanya langsung diterapkan. Cascade baru masuk saat ada persaingan nilai pada property yang sama.

Empat Kriteria Berurutan #

Untuk menentukan pemenang, browser membandingkan deklarasi-deklarasi yang bersaing melalui empat kriteria dengan urutan yang tetap. Kriteria pertama yang berhasil memisahkan kandidat langsung menentukan pemenang; bila hasilnya seri, perbandingan berlanjut ke kriteria berikutnya.

Urutan	Kriteria	Pertanyaan yang dijawab
1	Origin & importance	Siapa penulis aturan, dan apakah deklarasinya memakai `!important`?
2	Cascade layers	Di dalam layer mana (`@layer`) aturan ini ditulis?
3	Specificity	Seberapa spesifik selector yang memilih elemen ini?
4	Source order	Deklarasi mana yang ditulis paling akhir?

Pada pekerjaan sehari-hari, konflik umumnya selesai di kriteria specificity dan source order. Kriteria origin baru terasa saat !important dipakai atau saat gaya bawaan browser ikut bersaing, sedangkan cascade layers adalah penambahan modern untuk mengelola CSS berskala besar. Satu hal penting perlu ditegaskan sejak sekarang: inheritance bukan bagian dari cascade. Cascade menyelesaikan persaingan deklarasi yang menargetkan elemen secara langsung, sedangkan inheritance meneruskan nilai ke elemen anak ketika tidak ada deklarasi sama sekali — dua mekanisme berbeda yang kita bahas pada chapter tersendiri.

Melihat Cascade Bekerja #

Demo berikut memuat dua aturan yang sama-sama mengatur color pada satu paragraf. Satu memakai selector element p, satu lagi memakai selector class .lead:

Penentu kemenangan .lead adalah kriteria specificity yang akan kita kuantisasi pada chapter ketiga section ini; sebelum itu, kita mulai dari kriteria yang paling mudah diamati: source order.

Kesalahan Umum saat Membaca Cascade #

Kesalahan	Akibatnya	Perbaikannya
Menganggap aturan terakhir selalu menang	Rule yang ditulis belakangan tetap kalah bila selector lawannya lebih spesifik	Bandingkan specificity lebih dulu, baru lihat urutan
Mencari penyebab konflik di satu berkas saja	Aturan pemenang ternyata datang dari library atau stylesheet lain	Telusuri semua sumber gaya yang dimuat halaman
Menambah `!important` sebagai langkah pertama	Masalah selesai paksa, tetapi konflik berikutnya makin sulit diurai	Turunkan specificity atau rapikan urutan terlebih dahulu

Tabel di atas menegaskan pola yang sama: sebelum mengubah kode, pastikan dulu kriteria mana yang menentukan pemenang. DevTools menampilkan vonis tersebut secara langsung, dan chapter terakhir section ini memandu pembacaannya.

Ringkasan #

Cascade adalah mekanisme browser untuk memilih satu pemenang ketika beberapa declaration bersaing pada elemen dan property yang sama. Penilaiannya mengikuti empat kriteria berurutan: origin & importance, cascade layers, specificity, lalu source order. Bila kita bisa menyebut kriteria mana yang menentukan hasil di halaman sendiri, gaya apa pun bisa diprediksi. Kita mulai dari kriteria paling mudah diamati: source order.