Pillole css: Usa !important in modo corretto

Pillole css: Usa !important in modo corretto

La regola !important serve per far prevalere una proprietà css nel caso in cui ad un elemento ne venga assegnata più di una, ma facciamo un esempio:

span{font-size: 12px;}
span{font-size: 10px;}

In questo caso si ha una ripetizione della proprietà per lo stesso elemento e viene premiata quella scritta per ultima.
Ma se noi scriviamo in questo modo:
span{font-size: 12px !important;}
Allora la proprietà con !important sovrascrive tutte le altre. Tuttavia l’ulitizzo della proprietà con !important può causare diversi problemi nel web design ed è buona norma sovrascrivere l’elemento con una classe o un id.
Esempio:

span.small{font-size: 12px;}
span.extra-small{font-size: 10px;}

In questo modo è possibile estendere il selettore universale span con una classe. E’ anche possibile sovrascrivere le proprietà delle classi estendendole a loro volta.
Esempio:

span.small{font-size: 12px; color: #000;}
span.small.red{color: #FF0000;}

In questo caso la classe small assegna le proprietà ad entrambi i selettori span e la classe red sovrascrivere la proprietà color della classe small senza dover utilizzare la regola !important poichè l’estensione ha la priorità.