Salah satu cara terbaik untuk mempelajari cara membuat kode situs web adalah dengan melihat kode sumber dari situs lain. Praktik ini adalah berapa banyak profesional web yang mempelajari keahlian mereka, terutama di hari-hari sebelum ada begitu banyak pilihan untuk desain web kursus, buku, dan situs pelatihan online.
Jika Anda mencoba praktik ini dan melihat lembar gaya berjenjang situs, satu hal yang mungkin Anda lihat dalam kode itu adalah baris yang mengatakan !penting. Istilah ini mengubah prioritas pemrosesan dalam style sheet.
Kaskade CSS
Lembar gaya cascading memang benar riam, artinya mereka ditempatkan dalam urutan tertentu. Secara umum, gaya diterapkan dalam urutan yang dibaca oleh browser. Gaya pertama diterapkan dan kemudian yang kedua, dan seterusnya.
Akibatnya, jika sebuah gaya muncul di bagian atas lembar gaya dan kemudian diubah di bagian bawah dokumen, contoh kedua dari gaya tersebut adalah yang diterapkan dalam contoh berikutnya, bukan yang pertama. Pada dasarnya, jika dua gaya mengatakan hal yang sama (yang berarti mereka memiliki tingkat kekhususan yang sama), yang terakhir yang terdaftar akan digunakan.
Sebagai contoh, mari kita bayangkan bahwa gaya berikut terdapat dalam lembar gaya. Teks paragraf akan ditampilkan dalam warna hitam, meskipun properti gaya pertama yang diterapkan berwarna merah. Ini karena nilai "hitam" terdaftar kedua. Karena CSS dibaca dari atas ke bawah, gaya terakhir adalah "hitam" dan karena itu yang menang.
p { warna: merah; }
p { warna: hitam; }
Betapa !pentingnya Mengubah Prioritas
Itu !penting direktif mempengaruhi cara CSS Anda mengalir sambil mengikuti aturan yang Anda rasa paling penting dan harus diterapkan. Aturan yang memiliki arahan ini selalu diterapkan di mana pun aturan itu muncul di dokumen CSS.
Untuk membuat teks paragraf selalu berwarna merah, dari contoh sebelumnya ubah style sebagai berikut:
p { warna: merah !penting; }
p { warna: hitam; }
Sekarang semua teks akan muncul dalam warna merah, meskipun nilai "hitam" tercantum kedua. Direktif !important mengesampingkan aturan normal dari kaskade dan memberikan gaya spesifisitas yang sangat tinggi.
Jika Anda benar-benar membutuhkan paragraf agar tampak merah, gaya ini akan melakukannya, tetapi itu tidak berarti bahwa ini adalah praktik yang baik.
Kapan Menggunakan !penting
Arahan !important berguna saat Anda menguji dan men-debug situs web. Jika Anda tidak yakin mengapa suatu gaya tidak diterapkan dan menganggapnya sebagai konflik kekhususan, tambahkan deklarasi !important ke style untuk melihat apakah itu memperbaikinya — dan jika ya, ubah urutan pemilih dan hapus perintah !important dari produksi Anda kode.
Jika Anda terlalu bersandar pada deklarasi !important untuk mencapai gaya yang Anda inginkan, pada akhirnya Anda akan memiliki lembar gaya yang dipenuhi dengan !gaya penting. Anda akan secara mendasar mengubah cara CSS halaman diproses. Ini adalah praktik malas yang tidak baik dari sudut pandang manajemen jangka panjang.
Gunakan !important untuk pengujian atau, dalam beberapa kasus, ketika Anda benar-benar harus mengganti gaya sebaris yang merupakan bagian dari kerangka tema atau kerangka. Bahkan dalam kasus tersebut, gunakan pendekatan ini dengan hemat dan alih-alih menulis lembar gaya bersih yang menghormati honor riam.
Lembar Gaya Pengguna
Arahan ini juga diterapkan untuk membantu pengguna halaman web mengatasi style sheet yang membuat halaman sulit untuk mereka gunakan atau baca.
Kapan seseorang mendefinisikan style sheet untuk melihat halaman web, style sheet itu ditolak oleh style sheet penulis halaman. Jika pengguna menandai gaya sebagai !penting, gaya tersebut mengesampingkan lembar gaya penulis halaman web, meskipun penulis menandai aturan sebagai !penting.
Hirarki ini berguna bagi pengguna yang perlu mengatur gaya dengan cara tertentu. Misalnya, pembaca tunanetra mungkin perlu meningkatkan ukuran font default di semua halaman web yang mereka gunakan. Dengan menggunakan direktif !important Anda dengan hemat dalam halaman yang Anda buat, Anda mengakomodasi kebutuhan unik pembaca Anda.