CSS !Importante: cos'è e quando usarlo

Pubblicato: 2020-06-27

Uno degli elementi più utili e controversi dei CSS è la proprietà !important . Ogni designer incontrerà il tag nel codice CSS ad un certo punto. La vera domanda e dilemma che sorge quando ciò accade è "è stato usato correttamente?" Poiché CSS !important è uno strumento così potente, sviluppatori e designer devono essere consapevoli delle migliori pratiche quando lo utilizzano. CSS !important può portare a tutti i tipi di codice spaghetti, e questo non va bene per nessuno.

Che cos'è il CSS importante?

La proprietà !important nei CSS indica che qualunque regola a cui è collegata ha la precedenza su altre regole. È la massima priorità per l'elemento e il selettore con cui viene utilizzato e quindi consente a sviluppatori e designer di avere un controllo specifico sullo stile per le singole parti del sito. Nella maggior parte dei casi, ciò significa sovrascrivere lo stile predefinito per il sito contenuto in styles.css o custom.css .

Ogni istanza di !important si applica solo alla riga specifica su cui appare . Quindi puoi usare la proprietà su alcune, ma non tutte, parti di uno snippet. Il codice CSS per !important ha questo aspetto:

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

La cosa principale da ricordare con !important è duplice:

  1. la parola importante deve essere sempre preceduta da un punto esclamativo (!)
  2. il punto e virgola deve essere sempre alla fine della riga, dopo la !dichiarazione importante

!important può anche essere usato pagina per pagina o modulo per modulo (nel caso di page builder come Divi), se vuoi, anche se è così che entri nel codice spaghetti di cosa sta sovrascrivendo quale elemento su quale pagina e in quale ordine?

Ogni designer prima o poi si imbatterà nel tag CSS importante e dovrà prendere una decisione. Vale la pena sovrascrivere lo stile predefinito del sito?

A volte, la risposta è un sonoro sì. Altre volte, è un no duro e veloce. Diamo un'occhiata ad alcune best practice con i CSS importanti per sapere quando probabilmente non romperà nulla, né ora né in futuro.

Quando usare i CSS Importante

L'uso principale (e più ampiamente accettato) di !important è quando si desidera che una classe che interagisce con un selettore primario abbia uno stile diverso. Forse vuoi che l' intestazione del titolo e le meta informazioni sui tuoi blog abbiano un carattere e un colore diversi rispetto al resto del tuo sito. Lo stile predefinito per questi elementi è ereditato dai selettori h1 e p nei file CSS. Verrà visualizzato qualsiasi cosa tu abbia impostato per le impostazioni predefinite del sito nei tuoi file .css o nel personalizzatore del tema WordPress.

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';
}

Puoi modificare i singoli elementi che desideri (titolo del post del blog e meta info) con le classi . titolo della voce e .post-meta. E poiché vuoi che ereditino ancora alcuni degli stili dal genitore h1 e p , utilizzerai h1.entry-title e p.post-meta per chiamarli in modo specifico.

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

Avere questi frammenti nello stesso foglio di stile farà sì che il codice superiore abbia effetto in tutti i casi tranne quando vengono visualizzati i titoli dei post e i meta dei post. La proprietà CSS importante sovrascrive l'impostazione predefinita e ti consente di avere un controllo preciso su di essa.

Questo tipo di personalizzazione individuale è l'uso principale di !important . Ma non l'unico.

Usa CSS Importante per proteggere classi, ID ed elementi

Puoi anche usare !important per rendere a prova di futuro anche vari elementi della tua pagina, che un ulteriore sviluppo sul sito potrebbe modificare in modi inaspettati. Potresti, ad esempio, sviluppare uno stile particolare per le caselle di iscrizione, gli opt-in per e-mail o gli incorporamenti di YouTube. Ognuno di questi potrebbe ereditare stili diversi dai tuoi fogli di stile in luoghi diversi. L'utilizzo del tag !important può far sì che sia necessaria una mano deliberata per modificare lo stile dei moduli o dei pulsanti.

Basta nominare l'elemento con una classe o un ID, quindi inserire !important su ogni riga.

.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;
}

Ecco! A prova di futuro da modifiche regolari nei fogli di stile.

Utilizzo degli stili in linea

Questo è uno di quei casi d'uso che potrebbero verificarsi o meno per molte persone. Era molto comune, ma lo è diventato meno quando ci siamo allontanati dalla codifica manuale dei nostri post e delle nostre pagine. Tuttavia, se mai scavi nell'HTML di un blocco Gutenberg o nella visualizzazione del testo dell'editor classico di WordPress, puoi assolutamente usare !important con lo stile CSS in linea.

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

Questo è importante per un paio di motivi. Il primo è che puoi controllare qualsiasi riga di codice nella tua pagina in modo specifico usando style="x:y!important;" e il secondo è che puoi sovrascrivere qualsiasi CSS già applicato a quella pagina. Anche se quel valore ha anche !important . Per esempio:

<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>

Anche se è presente uno stile HTML incorporato che utilizza <style></style> che utilizza !important sullo stesso selettore, il CSS in linea che ha come target il paragrafo specifico sarà quello che viene visualizzato.

Attenzione all'impilamento di tag importanti

Prendiamo questi ultimi due esempi e diamo una parola di cautela. Questi tipi di usi vanno bene a piccole dosi. Puoi usarli in situazioni una tantum e probabilmente nessuno avrà mai problemi con esso. Perché, come una tantum, hai usato specificamente !important per modellare un singolo elemento. A cosa è destinato .

Tuttavia, se inizi a utilizzare !important come una stampella, come un modo per evitare di modificare i fogli di stile con la stessa frequenza o come soluzione rapida per più problemi sullo stesso sito, questo è l'inizio del codice spaghetti. Soprattutto per i futuri sviluppatori che non sei tu. Anche se potresti avere difficoltà a capire l'ordine in cui vengono visualizzati gli !important , uno sviluppatore futuro potrebbe trovarlo impossibile.

Quello che succede alla fine è che ci sono così tanti !important impilati nel sito che interagiscono con più fogli di stile, pagine e moduli, che il normale CSS raramente esegue il rendering. E a volte, anche qualcosa contrassegnato come !important non viene visualizzato. O peggio, ogni modifica successiva deve essere contrassegnata come !importante solo perché venga visualizzata, a meno che tu non voglia eliminare lo stile del sito e ricostruirlo di nuovo.

Avvolgendo

CSS importante è onestamente uno degli strumenti più potenti nel toolkit di un designer. Puoi facilmente modificare qualsiasi elemento del tuo sito senza preoccuparti di influenzare eventuali subordinati o colleghi. Ma se lo usi in modo eccessivo, gli effetti possono precipitare in un incubo di pagine ed elementi che cercano di sovrascriversi a vicenda, e ciò che una volta era importante è diventato l'impostazione predefinita, ma non può essere impostata come predefinita. Quindi prova a usare !important con parsimonia, in modo che quando hai bisogno di qualcosa per distinguerti o essere a prova di futuro, lo stai facendo nel modo giusto.

Che ne dici di usare CSS !important nei tuoi progetti?

Immagine in primo piano dell'articolo di wan wei / shutterstock.com