Source Order

Dari empat kriteria cascade, source order adalah yang paling mudah diprediksi: bila dua deklarasi bersaing dan kriteria sebelumnya menghasilkan seri, deklarasi yang ditulis paling akhir menang. Aturan sederhana ini punya konsekuensi luas — urutan tag <link> di HTML, susunan rule di dalam satu berkas, hingga tempat kita meletakkan class utilitas semuanya ikut menentukan hasil akhir. Pada chapter ini kita melihat kriteria tersebut bekerja, lalu menata pola penulisan yang memanfaatkannya secara sadar.

Deklarasi Terakhir yang Menang #

Kriteria source order hanya dipakai bila deklarasi-deklarasi yang bersaing berasal dari sumber yang setara: origin yang sama, tanpa perbedaan layer, dan specificity yang sama. Begitu semua penilaian seri, posisi dalam kode menjadi penentu. Perhatikan dua rule berikut:

.tombol-langganan {
  background-color: #14503a;
}

.tombol-langganan {
  background-color: #b45309;
}

Kedua rule memakai selector yang identik, sehingga specificity-nya pasti seri. Deklarasi kedua ditulis belakangan, dan itulah pemenangnya:

Bila deklarasi kedua dihapus, rule pertama langsung kembali berlaku.

Perlu digarisbawahi: source order menilai deklarasi, bukan rule secara utuh. Bila rule kedua hanya mengatur color, maka property background-color milik rule pertama tetap berlaku karena tidak ada yang bersaing dengannya. Penimpaan bekerja per property, bukan per blok.

Urutan Antarberkas Juga Dihitung #

Satu halaman lazim memuat lebih dari satu stylesheet, dan urutan pemuatannya ikut menentukan pemenang saat terjadi seri. Browser membaca stylesheet sesuai urutan kemunculannya di HTML:

<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="komponen.css">
<link rel="stylesheet" href="halaman-utama.css">

Dengan susunan di atas, deklarasi di halaman-utama.css dianggap ditulis paling akhir, sehingga bila specificity-nya seri dengan komponen.css, berkas tersebut yang menang. Menukar urutan dua tag <link> bisa mengubah tampilan halaman tanpa mengubah satu baris CSS pun. Aturan yang sama berlaku untuk beberapa blok <style> dalam satu dokumen: blok yang berada lebih bawah dibaca belakangan.

Dua blok <style> berikut menyimulasikan dua berkas stylesheet dalam satu dokumen; keduanya mengatur color untuk elemen yang sama, sementara border-left hanya diatur sekali:

Memindahkan blok kedua ke posisi paling atas akan membalik hasilnya — satu perpindahan baris mengubah vonis cascade tanpa menyentuh selector maupun nilai.

Pola Penataan yang Memanfaatkan Source Order #

Karena urutan itu kuat, proyek CSS yang rapi menatanya secara sengaja. Tiga pola berikut adalah konvensi yang umum dipakai:

• Gaya dasar lebih dulu: reset, variabel, dan style umum (body, heading, tautan) ditulis di awal berkas agar mudah ditimpa.
• Komponen setelahnya: rule komponen seperti .kartu dan .tombol ditulis setelah dasar, mengikuti urutan pemuatan yang logis.
• Class utilitas di ujung berkas: helper seperti .teks-tengah atau .m-0 diletakkan paling akhir agar mampu menimpa gaya komponen tanpa perlu menaikkan specificity.

Dengan pola ini, kita memanfaatkan kriteria cascade yang paling murah: menulis ulang posisi, bukan menambah bobot selector. Hasilnya stylesheet tetap datar dan mudah dibaca.

Kesalahan Umum Terkait Urutan #

Ketiga kesalahan ini berakar pada asumsi yang sama: menganggap urutan sebagai satu-satunya kriteria cascade. Ingat kembali bahwa urutan hanya bicara saat penilaian sebelumnya seri, dan gunakan ia sebagai alat penataan — bukan alat pemaksaan.

Ringkasan #

Source order adalah penentu terakhir dalam cascade: bila origin, layer, dan specificity semuanya seri, deklarasi yang ditulis paling akhir menang, dan penilaiannya berlaku per property. Urutan tag <link>, susunan rule di berkas, hingga posisi class utilitas semuanya bagian dari kriteria ini. Namun urutan hanya berbicara saat penilaian seri — untuk menimbang dua selector yang berbeda bentuk, kita perlu alat ukur yang lebih presisi: specificity.