CSS !important adalah deklarasi dalam kode CSS untuk memberikan prioritas absolut terhadap suatu aturan style, melewati semua aturan CSS yang sudah ada dan berpotensi bertentangan.

Dengan deklarasi !important, style tertentu akan diterapkan dan mengesampingkan aturan lain yang berlaku untuk elemen tersebut.

Ketika kamu menetapkan !important pada sebuah style CSS, kamu menginstruksikan browser bahwa aturan tertentu lebih penting daripada aturan lain yang diterapkan pada elemen yang sama. Oleh karena itu, aturan harus diterapkan terlepas dari standard specificity-nya.

Namun, aturan !important harus dilakukan dengan hati-hati karena penggunaan berlebihan menyebabkan kode sulit dibaca dan dikelola. Terlalu banyak menggunakan !important dapat mengakibatkan style yang saling bertentangan, di mana satu aturan menimpa aturan lain, sehingga menciptakan kekacauan dalam stylesheet.

Aturan ini seharusnya menjadi pilihan terakhir saat semua metode lain untuk mengatur specificity telah gagal.

Melalui artikel berikut, kita akan menjelajahi fungsi, waktu penggunaan yang tepat, dan best practice penggunaan !important dalam stylesheet.

Fungsi !important dalam CSS

Berikut beberapa kegunaan utama dari !important dalam CSS:

  • Mengesampingkan style pihak ketiga: saat bekerja dengan template, library, atau framework CSS dari pihak ketiga, kamu mungkin menemukan style yang tidak sesuai dengan kebutuhan. Menggunakan !important dapat membantu mengesampingkan aturan-aturan tersebut dengan aturanmu sendiri, tanpa harus mengubah source code asli.

  • Prioritas style khusus: dalam situasi di mana kamu perlu memastikan beberapa aturan CSS diterapkan tanpa terkecuali (meskipun ada aturan lain yang mungkin bertentangan), !important memberikan kontrol tersebut. Hal ini berguna dalam kasus style dinamis atau inline yang ditambahkan melalui JavaScript.

  • Pengembangan dan debugging: selama proses pengembangan, terutama saat debugging, biasanya perlu sementara mengesampingkan beberapa style untuk menguji perilaku tertentu. Menggunakan !important bisa mempercepat proses ini dengan membuat perubahan tanpa mengubah struktur kode yang ada.

  • Penyesuaian untuk audiens: untuk website yang menawarkan fitur penyesuaian bagi user (seperti mengubah tema warna) !important dapat memastikan pilihan user selalu diutamakan dan mengesampingkan aturan CSS asli.

Kapan Harus Menggunakan !important?

Berikut beberapa situasi di mana menggunakan !important dapat dianggap sebagai best practice:

Mengatasi style pihak ketiga

Saat menggunakan library atau framework CSS external, kamu biasanya menemukan style yang tidak sesuai dengan desain website-mu. Dalam kasus ini, menggunakan !important akan membantu mengesampingkan style tersebut.

/* style pihak ketiga */
.button {
  background-color: blue;
}

/* style custom */
.my-custom-style .button {
  background-color: green !important;
}

Di sini, meskipun library pihak ketiga menetapkan warna background button menjadi biru, !important akan memastikan dalam konteks class .my-custom-style tombol selalu memiliki background hijau.

Perubahan style sementara untuk testing

Saat melakukan testing atau debugging, kamu mungkin perlu mengesampingkan beberapa style untuk sementara waktu. Dalam kasus ini, menggunakan !important memungkinkan kamu untuk melihat perubahan dengan cepat tanpa mengubah banyak kode.

/* style asli */
.testing-element {
  display: none;
}

/* style untuk keperluan pengujian */
.testing-element {
  display: block !important;
}

Mengatasi inline style

Jika sebuah elemen memiliki inline style yang ditambahkan melalui JavaScript atau HTML, menggunakan !important dalam file CSS dapat membantu mengesampingkan style tersebut.

Contoh kode HTML yang memiliki elemen dengan inline style: