Quando usare !important nei CSS

Ha senso utilizzare !important in un foglio di stile? La risposta è no, con rare eccezioni.

L’uso di !important nei CSS è la principale causa di frustrazione quando si lavora su un sito, soprattutto se ereditato da altri sviluppatori.

Infatti se all’interno di un CSS ci sono delle regole contrassegnate con !important e questi valori devono essere modificati su dei nuovi elementi, non ci sono molte soluzioni. Le principali sono due:

• stravolgere il foglio di stile
• entrare in un circolo vizioso aggiungendo nuove regole con !important.

Basta capire questo per rendersi conto di come sia sempre meglio evitarne l’uso. Mi era capitato anche in passato di sfiorare l’argomento parlando degli standard del sito della BBC, dove era appunto proibito agli sviluppatori di utilizzare questa regola.

Ma quali sono le alternative? Prima di tutto pensare fin da subito a come dovrà essere organizzato il foglio di stile. Scrivere regole generiche non aiuta e molto spesso è il motivo per cui si viene tentati dall’utilizzo di !important.

Un link ad esempio avrà una sua definizione generica all’inizio del CSS:

a {...}

Ma unire a questo qualcosa come

#content a {...}

…sarà fonte di problemi dopo poco tempo, perché è una definizione troppo generica per non richiedere nuovi interventi. Per evitarlo, la cosa migliore è appoggiarsi sempre a selettori ben specifici, a seconda dell’area del sito.

In un blog potrebbero esserci ad esempio vari div contenitori all’interno dei post, con cui differenziare lo stile dei link:

#content .post_header a {...}
#content .post a {...}

O sulla sidebar invece di un generico

#sidebar a {...}

potrebbero essere definite delle aree precise come sui temi WordPress:

.widget a {...}

Eccezioni

Uno dei rari casi in cui l’uso di !important può avere senso è quando sono presenti elementi specifici che devono apparire uguali in qualsiasi punto del sito. Non sto parlando di bottoni e riquadri (che potrebbero sempre avere delle varianti), ma ad esempio di indicazioni di stato come i messaggi di errore.

Contrassegnare una classe .error nel seguente modo potrebbe essere l’unica ragione per tollerarne l’uso:

.error {color: #f00 !important;}

Se volete leggere anche un’opinione autorevole a riguardo, vi consiglio di dare un’occhiata al post When using !important is the right choice su CSS Tricks, e di leggere attentamente il commento di Jonathan Snook in risposta agli esempi citati dall’autore.