DISKON TERBATAS! Masukkan kupon "skillbaru" saat checkout di kelas apa saja

Logo Koala Skodev mengetik

Skodev

Belajar coding dalam bahasa Indonesia

PENGGUNAAN !IMPORTANT

Pelajari bagaimana menggunakan !important dalam CSS, kapan harus digunakan dan apa dampaknya dalam mengontrol prioritas aturan CSS.

CSS memberikan kita kebebasan untuk membangun dan mendesain tampilan website sesuai dengan kreativitas kita. Salah satu aspek penting dalam CSS adalah prioritas aturan atau yang biasa dikenal sebagai Cascading Order. Dalam penggunaan sehari-hari, mungkin kamu akan menemui kasus di mana beberapa aturan CSS berkonflik dan kamu perlu menentukan aturan mana yang harus mendapat prioritas. Di sinilah peran !important dimainkan.

Apa itu !important?

!important adalah kata kunci dalam CSS yang dapat digunakan untuk memberikan prioritas tertinggi pada suatu aturan CSS. Dengan menambahkan !important setelah deklarasi aturan CSS, kamu memastikan bahwa aturan tersebut akan diterapkan, mengabaikan semua aturan CSS lainnya yang mungkin memiliki prioritas lebih tinggi.

Cara Menggunakan !important

Untuk menggunakan !important, kamu perlu menambahkannya tepat setelah nilai properti CSS, sebelum tanda titik-koma.

Misalkan, kita memiliki aturan CSS berikut ini:

p {
  color: red;
}

Kita dapat menambahkan !important seperti ini:

p {
  color: red !important;
}

Aturan CSS di atas akan memastikan bahwa semua elemen paragraf (p) pada halaman akan berwarna merah, meskipun mungkin ada aturan CSS lainnya yang bertentangan dan seharusnya memiliki prioritas lebih tinggi.

Kapan Harus Menggunakan !important

Penggunaan !important haruslah disederhanakan sebanyak mungkin. Mengapa? Sebab !important memecahkan siklus prioritas CSS alami dan memaksa peramban untuk menerapkan aturan yang ditandai sebagai !important, bahkan jika ada aturan lain yang seharusnya menjadi prioritas. Ini dapat berpotensi membuat CSS menjadi sulit untuk dipahami dan dikelola.

Namun, berikut ini beberapa kasus di mana penggunaan !important dapat dipertimbangkan:

Alasan Coding Cepat

Mungkin ada saat-saat di mana kamu perlu membuat perubahan cepat pada halaman CSS dan kamu tidak memiliki waktu cukup untuk memahami dan merapikan hierarki CSS yang ada. Dalam kasus seperti itu, !important dapat digunakan sebagai solusi sementara.

Menimpa Library CSS Eksternal

Jika kamu sedang menggunakan library CSS eksternal dan perlu menimpa beberapa aturan CSS-nya, !important dapat digunakan. Meskipun, solusi terbaik tetaplah dengan memodifikasi CSS tersebut pada level source code ketika memungkinkan.

👈🏼 Combinators
Pseudo-Class link 👉🏼