!important

Pernah menambah deklarasi baru, memperkuat selector, bahkan memindahkan rule, tetapi gaya lama tetap menang? Kemungkinan besar lawannya memakai !important. Deklarasi ini bukan sekadar penambah bobot: ia memindahkan deklarasi ke tingkatan tersendiri dalam cascade sehingga melewati penilaian specificity maupun source order. Karena kekuatannya besar, !important punya aturan main sendiri, daftar pemakaian yang sah, dan risiko yang perlu dipahami sebelum mengetik karakter serunya.

Cara Kerja dalam Cascade #

!important ditulis pada deklarasi, tepat sebelum titik koma:

.peringatan {
  color: #b45309 !important;
}

Hal pertama yang perlu diluruskan: !important tidak dihitung sebagai bagian dari specificity. Selector .peringatan tetap berbobot (0, 1, 0). Yang berubah adalah tempat deklarasi ini dinilai — ia naik ke kelompok important pada kriteria pertama cascade, yaitu origin & importance, dan mengalahkan seluruh deklarasi normal dari origin yang sama.

Rantai prioritas lengkap antar-origin, dari yang terlemah ke terkuat, berbentuk seperti ini:

Dari tabel tersebut ada dua pembacaan penting. Pertama, di dalam CSS kita sendiri, satu deklarasi !important mengalahkan semua deklarasi normal berapa pun specificity-nya. Kedua, urutan origin terbalik pada kelompok important: !important milik pengguna mengalahkan !important milik penulis halaman. Desain ini disengaja demi aksesibilitas — pengguna yang memaksa teks lebih besar atau kontras lebih tinggi lewat preferensi browser harus selalu menang atas keputusan desain kita, sekeras apa pun deklarasi kita ditulis.

Pada dua panel berikut, deklarasi bersaing secara normal di panel pertama; di panel kedua deklarasi yang kalah tadi diberi !important:

Dengan !important, specificity kedua rule tidak lagi relevan karena vonis diputuskan di kelompok important.

Kapan Pemakaiannya Sah #

Ada beberapa situasi di mana !important adalah pilihan yang benar, bukan penyelamat darurat:

• Class utilitas penimpa — helper seperti .tersembunyi { display: none !important; } sengaja dibuat tak terkalahkan agar selalu bekerja di mana pun dipasang.
• Menimpa gaya pihak ketiga — widget atau library yang stylesheet-nya tidak boleh kita sunting kadang hanya bisa dikendalikan dari luar dengan cara ini.
• Gaya aksesibilitas pengguna — stylesheet milik pengguna memakai !important untuk memastikan preferensinya ditegakkan, dan itulah alasan tingkat 5 dalam rantai prioritas.

Mengapa Menyebar Itu Merugikan #

Masalah bukan pada satu !important, melainkan pada efek berantainya. Deklarasi yang dipakai untuk memaksa kemenangan membuat vonis cascade tidak terbaca lagi: rule yang tampak lebih spesifik dan ditulis lebih akhir tetap kalah tanpa alasan yang kelihatan. Rekan tim yang perlu menimpa gaya tersebut terpaksa menambah !important kedua, lalu yang ketiga, dan setiap lapisan membuat debugging makin panjang.

Cara terbaik menghindarinya ada di hulu, bukan di hilir: jaga selector tetap pendek di level class, manfaatkan source order untuk penimpaan yang setara, dan pecah stylesheet ke dalam @layer bila menimpa library. Bila semua jalan itu sudah ditempuh dan satu kasus memang butuh paksaan, gunakan !important secara terlokalisasi dengan komentar yang menjelaskan alasannya.

Perbaikan di hulu sering berupa perampingan selector. Bandingkan dua gaya berikut:

/* Sebelum: selector berat yang menuntut override makin berat */
#sidebar .menu li a.aktif {
  color: #14503a;
}

/* Sesudah: satu class ringan yang mudah ditimpa dan dibaca */
.link-aktif {
  color: #14503a;
}

Dalam demo berikut, class utilitas penimpa yang sama ditempelkan pada kedua tautan:

Kedua gaya awalnya menghasilkan tampilan yang sama, tetapi hanya versi ringan yang mau ditimpa class utilitas — cukup class tambahan atau posisi yang lebih bawah, tanpa perlu !important sama sekali.

Ringkasan #

!important memindahkan deklarasi ke kelompok important pada kriteria origin & importance, sehingga mengalahkan semua deklarasi normal dari origin yang sama tanpa melihat specificity maupun urutan. Urutan antar-origin terbalik pada kelompok ini, dan !important milik pengguna selalu mengalahkan milik penulis halaman demi aksesibilitas. Pakailah hanya pada kasus yang sah — utilitas penimpa, gaya pihak ketiga, kebutuhan aksesibilitas — dan jaga stylesheet agar tidak bergantung padanya. Selanjutnya kita gabungkan seluruh kriteria menjadi prosedur keputusan untuk kasus konflik yang utuh.