CSS !Penting: Apa Itu dan Kapan Menggunakannya

Diterbitkan: 2020-06-27

Salah satu elemen CSS yang paling berguna dan kontroversial adalah properti !important . Setiap desainer akan menemukan tag dalam kode CSS di beberapa titik. Pertanyaan dan dilema sebenarnya yang muncul ketika itu terjadi adalah “apakah itu digunakan dengan benar?” Karena CSS !important adalah alat yang sangat kuat, pengembang dan desainer perlu mengetahui praktik terbaik saat menggunakannya. CSS !important dapat mengarah ke semua jenis kode spageti, dan itu tidak baik untuk siapa pun.

Apa itu CSS Penting?

Properti !important di CSS menunjukkan bahwa aturan apa pun yang dilampirkannya akan lebih diutamakan daripada aturan lainnya. Ini adalah prioritas utama untuk elemen dan pemilih yang digunakan dengannya, dan oleh karena itu memungkinkan pengembang dan desainer memiliki kontrol khusus atas gaya untuk setiap bagian situs. Dalam kebanyakan kasus, itu berarti mengganti gaya default untuk situs yang terdapat di styles.css atau custom.css .

Setiap contoh !important hanya berlaku untuk baris tertentu tempat kemunculannya . Jadi Anda dapat menggunakan properti di beberapa, tetapi tidak semua, bagian dari cuplikan. Kode CSS untuk !important terlihat seperti ini:

.example-class {
	color:#fff!important;
}

Hal utama yang perlu diingat dengan !important ada dua:

  1. kata penting harus selalu didahului dengan tanda seru (!)
  2. titik koma harus selalu berada di akhir baris, setelah !deklarasi penting

!important bahkan dapat digunakan berdasarkan halaman demi halaman atau modul demi modul (dalam kasus pembuat halaman seperti Divi), jika Anda mau — meskipun begitulah cara Anda masuk ke kode spageti tentang apa yang menimpa elemen mana halaman mana dan dalam urutan apa?

Setiap desainer di beberapa titik atau lainnya akan menjalankan tag penting CSS dan harus membuat keputusan. Apakah ini layak untuk mengganti gaya default situs?

Terkadang, jawabannya adalah ya. Di lain waktu, itu tidak sulit dan cepat. Mari kita lihat beberapa praktik terbaik dengan CSS yang penting untuk diketahui kapan mungkin tidak akan merusak apa pun, baik sekarang maupun di masa mendatang.

Kapan Menggunakan CSS Penting

Penggunaan utama (dan paling diterima secara luas) dari !important adalah ketika Anda ingin kelas yang berinteraksi dengan pemilih utama ditata secara berbeda. Mungkin Anda ingin judul judul dan informasi meta di blog Anda menjadi font dan warna yang berbeda dari yang Anda lakukan di situs Anda lainnya. Gaya default untuk elemen ini diwarisi dari selektor h1 dan p di file CSS Anda. Apa pun yang telah Anda atur untuk default situs baik dalam file .css atau penyesuai tema WordPress akan ditampilkan.

p {
	font-weight: 400;
	font-size: 1.1rem;
	line-height: 1.7;
	color: #111;
	font-family:'Roboto';
}

h1 {
	margin-top: 30px;
	margin-bottom: 15px;
	color: #000;
	font-family:'Lato';
}

Anda dapat mengubah elemen individual yang Anda inginkan (judul posting blog dan info meta) dengan class . entry-title dan .post-meta. Dan karena Anda ingin mereka tetap mewarisi beberapa gaya dari induk h1 dan p , Anda akan menggunakan h1.entry-title dan p.post-meta untuk memanggil ini secara khusus.

h1.entry-title, p.post-meta {
	color: white!important;
	font-family:'Poppins'!important;
}

Memiliki potongan-potongan ini dalam stylesheet yang sama akan menyebabkan kode teratas berlaku di semua kasus kecuali ketika Judul Postingan dan Meta Postingan ditampilkan. Properti penting CSS menimpa default dan memungkinkan Anda memiliki kontrol yang baik atasnya.

Kustomisasi individu semacam ini adalah penggunaan utama dari !important . Tapi bukan satu-satunya.

Gunakan CSS Penting untuk Melindungi Kelas, ID, dan Elemen

Anda juga dapat menggunakan !important untuk membuktikan masa depan berbagai elemen halaman Anda, bahwa pengembangan lebih lanjut di situs dapat mengubah cara yang tidak terduga. Anda dapat, misalnya, mengembangkan gaya tertentu untuk kotak berlangganan atau keikutsertaan email atau penyematan YouTube. Masing-masing dari ini mungkin mewarisi gaya yang berbeda dari lembar gaya Anda di tempat yang berbeda. Menggunakan tag !important dapat membuatnya sehingga dibutuhkan tangan yang disengaja untuk mengubah gaya bentuk atau tombol Anda.

Cukup beri nama elemen dengan kelas atau ID, lalu masukkan !important di setiap baris.

.youtube-embed {
	font-family:'Exo'!important;
	font-weight: 700!important;
	line-height:1.4rem!important;
	margin-top:25px!important;
	margin-left:auto!important;
	margin-right:auto!important
	color:#449928!important;
	padding:11px!important;
	background:#998899;
}

Voila! Terbukti di masa depan dari perubahan reguler di stylesheet Anda.

Menggunakan Gaya Sebaris

Ini adalah salah satu kasus penggunaan yang mungkin atau mungkin tidak muncul untuk banyak orang. Dulu sangat umum, tetapi menjadi kurang begitu karena kami telah beralih dari pengkodean tangan pada posting dan halaman kami. Namun, jika Anda pernah menggali HTML blok Gutenberg atau tampilan teks editor klasik WordPress, Anda benar-benar dapat menggunakan !important dengan gaya CSS sebaris.

<div class="special-paragraph" style="color:#blue!important;">
	<p>This text will show up blue now!</p>
</div>

Ini penting karena beberapa alasan. Yang pertama adalah Anda dapat mengontrol baris kode apa pun di halaman Anda secara khusus dengan menggunakan style="x:y!important;" dan yang kedua adalah Anda dapat mengganti CSS apa pun yang sudah diterapkan ke halaman itu. Bahkan jika nilai itu juga memiliki !important . Sebagai contoh:

<style> 
	p { 
	    color:#313373!important;
	    font-size:2rem; 
	} 

    </style> 

<div class="special-paragraph" style="color:#blue!important;">
	<p>This text will show up blue now, even though there's another !important tag
		applied to the paragraph selector on this page!</p>
</div>

Bahkan jika ada gaya HTML yang disematkan menggunakan <style></style> yang menggunakan !important pada pemilih yang sama, CSS sebaris yang menargetkan paragraf tertentu akan menjadi yang dirender.

Awas Tumpukan Tag Penting

Mari kita ambil beberapa contoh terakhir dan berikan peringatan. Jenis penggunaan ini baik-baik saja dalam dosis kecil. Anda dapat menggunakannya dalam situasi satu kali saja, dan tidak seorang pun mungkin akan mempermasalahkannya. Karena, sebagai satu kali, Anda secara khusus menggunakan !important untuk menata elemen individual. Untuk apa itu dimaksudkan .

Namun, jika Anda mulai menggunakan !important sebagai penopang, sebagai cara untuk menghindari pengeditan lembar gaya Anda sesering mungkin atau sebagai perbaikan cepat untuk beberapa masalah di situs yang sama, itulah awal dari kode spageti. Terutama untuk pengembang masa depan yang bukan Anda. Meskipun Anda mungkin kesulitan mencari tahu urutan render !important s, pengembang masa depan mungkin menganggapnya tidak mungkin.

Apa yang akhirnya terjadi adalah bahwa ada begitu banyak !important bertumpuk di seluruh situs yang berinteraksi dengan beberapa stylesheet, halaman, dan modul, yang jarang dirender oleh CSS normal. Dan terkadang, bahkan sesuatu yang ditandai !important tidak ditampilkan. Atau lebih buruk lagi, setiap perubahan sesudahnya harus ditandai !penting hanya untuk itu muncul, kecuali jika Anda ingin meruntuhkan gaya situs dan membangunnya kembali.

Membungkus

CSS penting sejujurnya adalah salah satu alat yang paling kuat dalam toolkit desainer. Anda dapat dengan mudah menyesuaikan elemen apa pun di situs Anda tanpa khawatir memengaruhi bawahan atau rekan kerja. Tetapi jika Anda menggunakannya secara berlebihan, efeknya dapat mengalir ke mimpi buruk halaman dan elemen yang mencoba untuk menimpa satu sama lain, dan apa yang dulunya penting telah menjadi default, tetapi tidak dapat ditetapkan sebagai default. Jadi cobalah untuk menggunakan !important dengan hemat, sehingga ketika Anda membutuhkan sesuatu untuk menonjol atau terbukti di masa depan, Anda melakukannya dengan cara yang benar.

Bagaimana perasaan Anda tentang penggunaan CSS !penting dalam proyek Anda?

Gambar unggulan artikel oleh wan wei / shutterstock.com