Peperangan Antar Selector

Singkatan dari CSS adalah Cascading Style Sheets (Lembar Gaya yang Mengalir dari Atas ke Bawah). Aturan paling dasar CSS adalah: Kode yang ditulis paling bawah akan menimpa (menang) kode yang di atasnya. TAPI, aturan itu bisa batal jika kita berhadapan dengan Specificity (Spesifisitas/Bobot).

Specificity adalah aturan "Kasta" yang digunakan browser untuk menentukan desain mana yang akan dimenangkan jika sebuah elemen dikeroyok oleh banyak perintah CSS yang bertentangan.

Sistem Poin (Kasta CSS)

Cara kerja Specificity mirip dengan sistem poin, di mana kelas tertinggi akan selalu membunuh kelas di bawahnya. Mari kita urutkan dari kasta paling rendah hingga tak terkalahkan.

Kasta 4 (Poin 1): Element & Pseudo-element

Ini adalah tag HTML murni (div, h1, p, ::before). Kekuatannya sangat lemah.
Contoh: h1 { color: red; }

Kasta 3 (Poin 10): Class, Attribute, Pseudo-class

Ini adalah senjata utamamu sehari-hari. Ia mengalahkan kasta Element.
Contoh: .judul-utama { color: blue; }

Kasta 2 (Poin 100): ID Selector

Tanda pagar (#) sangat egois dan kuat. Meskipun Class ditulis di baris ke-1000 dan ID ditulis di baris pertama, perintah ID akan selalu menang telak.
Contoh: #header { color: yellow; }

Kasta 1 (Poin 1.000): Inline Style

Ini adalah saat kamu menulis CSS langsung di dalam HTML (di dalam tag pembukanya). Cara ini sangat tidak disarankan karena akan mengalahkan seluruh file CSS yang ada.
Contoh:

Mantra Terlarang: !important (Poin 10.000)

Pernah merasa frustrasi karena kodemu ditimpa oleh *library* bawaan seperti Bootstrap? Kamu pasti pernah menambahkan kata !important di akhir kodemu. Kata ajaib ini akan menghancurkan seluruh sistem kasta di atas dan langsung memenangkan pertarungan.

.judul-utama {
  color: purple !important; 
}

Peringatan Keras: Jangan gunakan !important jika tidak benar-benar terpaksa (seperti untuk memaksa *override* plugin pihak ketiga). Jika kamu terbiasa memakainya di mana-mana, suatu hari nanti saat kodemu rusak, kamu tidak akan bisa lagi menemukan cara menimpanya (karena semua kode berstatus !important), dan file CSS-mu akan menjadi mimpi buruk yang berantakan.