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