Mengenal fungsi !important di css

Mengenal fungsi !important
Secara sederhana, fungsi dari !important adalah untuk menjalankan value (nilai) yang ditambahkan dan menimpa terhadap nilai properti CSS Global (css utama) yang sedang digunakan. !important berlaku jika ada selektor atau tag yang sama dalam CSS.
!important juga berperan ketika terhubung dengan stylesheet default. Jika terdapat kontradiksi ketika menerapkan gaya pada halaman untuk item yang sama namun tidak cocok, maka prioritas utama adalah pada property yang memiliki !important. Hal ini dapat meningkatkan gaya.
Bila menambahkan !important untuk nilai property dapat menekankan sisi penggunaanya. Jika mengesampingkan nilai properti yang sama tanpa penggunaan !important, maka akan diabaikan oleh browser, kecuali dalam versi Intenet Explorer 6 dan versi di bawahnya.
Menggunakan !important pada gaya Inline
!important dapat di gunakan pada gaya inline dalam elemen HTML. Kita ambil contoh dalam sebuah file CSS terdapat selektor CLASS seperti berikut :

.maintxt {
border: 1px solid red;
background-color: green;
margin: 3px;
padding: 5px;
}

Ketika mengedit halaman dan menuliskan elemen HTML menggunakan selektor CLASS di atas tetapi ingin membuat gaya yang sedikit berbeda, misalnya mengubah warna latarbelakang dari warna hijau menjadi kuning, maka penulisan kode dalam gaya inline menjadi seperti ini :

<div class="maintxt" style="background-color: yellow !important;">
Konten
</div>

Penerapan !important pada CSS Eksternal
Misalkan kita ingin menerapkan !important terhadap penulisan selektor gambar yang didefenisikan dengan kode img dalam sebuah file CSS dan dalam tag HTML menggunakan kode <img>.

img {
border: 3px solid red;
margin: 6px 0 5px;
padding : 0;
}

Ketika kita ingin menghilangkan atau mengganti warna border gambar dengan warna lain, maka di sinilah penggunaan !important, misalnya ketika ingin menampilkan gambar logo situs tanpa border yang terdapat pada bagian selektor #header, maka penulisan untuk kode gambar menjadi :

#header img {
border: none !important;
}

Potongan kode CSS tersebut di atas jika di satukan akan menjadi seperti ini

body {
------ Kode -----
}
img {
border: 3px solid red;
margin: 6px 0 5px;
padding: 0;
}
#header img {
border: none !important;
}

Kapan memutuskan menggunakan !important
Saya menyarankan anda untuk tidak menggunakan !important kecuali jika anda tidak bisa melakukannya dengan cara yang lain. Sedapat mungkin untuk menghindarinya. Menggunakan terlalu banyak !important pada desain gaya akan membuat pemeliharaan, termasuk pengeditan ulang terhadap gaya CSS menjadi sedikit lebih sulit, karena melanggar aturan Cascade di stylesheet anda.
Jadi, manfaat dari !important adalah bahwa kadang-kadang hal itu diperlukan untuk menghemat waktu. Jika Anda menggunakannya secara tepat, dapat menjadi alat yang berguna. Namun jika anda menggunakannya hanya karena anda tidak mengerti tentang bagaimana spesifisitas bekerja (penekanan terhadap salah satu nilai property yang berbeda dari selektor CSS yang sama), maka anda melakukannya secara salah.
Menurut saya, sebenarnya tidak terlalu penting menggunakan !important jika CSS yang digunakan sudah terstruktur dengan baik dan tidak memiliki terlalu banyak derajat kekhususan.
Saat yang paling tepat untuk menggunakan !important adalah ketika memiliki satu gaya yang luar biasa dan kita ingin agar gaya tersebut di terapkan pada berkas halaman.