Gestire la priorità delle regole nei fogli di stile a cascata

Ordine

L’ordine con cui si scrive le regole nei css è davvero importante, non a caso si chiamano fogli di stile a cascata.

Nel caso di due regole con pari priorità quella scrita per ultima sovrascriverà la precedente.

p{color:#000000;}
p{color:#cc0000;}

In questo caso il paragrafo sarà di colore rosso (#cc0000) . Può sembrar banale ma occorre ricordare che l’ordine va considerato per ogni regola e per ogni css. Se ad esempio nella nostra pagina abbiamo un link ad un css esterno e delle regole impostate internamente alla pagina le ultime sovrascriveranno le prime.

<link rel="stylesheet" type="text/css" href="css/common.css"/>
<style type="text/css">
p{color:#cc0000;}
</style>

Anche in questo caso il colore del testo nel paragrafo sarebbe rosso, come nell’ultima regola enunciata.

L’ordine delle regole css è un concetto che vale per tutte le dichiarazioni css (interne, esterne, in linea e importate) quando si collega, si dichiara o si importano delle regole si danno delle priorità.

Lo stesso concetto è vero per le proprietà, nel caso di due proprietà uguali all’interno di una regola, l’ultima sovrascrive la prima:

p{
color:#000000;
color:#cc0000;
}

In questo caso il colore del testo nel paragrafo sarà rosso (#cc0000), in quanto l’ultima proprietà sovrascrive la prima.

Priorità

L’ordine è utile per impostare gli stili ed evitare che alcune regole ne sovrascrivano altre ma per definire una priorità sulle regole è necessario conoscere la specificità di ogni selettore.

Per definire quale priorità abbia una regola è necessario valutare la quantità e la qualità dei selettori.

Per ogni regola definita è infatti possibile calcolare la priorità con un numero a tre cifre.

priorità 001
p{...}
priorità 002
p a{...}
priorità 011
p.testo{...}
priorità 012
p.testo a{...}
priorità 112
#contenitore p.testo a{...}
priorità 122
#contenitore p.testo a:hover{...}

Come si vede dall’esempio per ogni selettore di tipo (i tag html) si aggiunge un’unità, per ogni classe o pseudo-classe si aggiunge una decina e per ogni id si aggiunge una centinaia. Le regole con il valore più alto saranno quelle a maggiore priorità.

E’ evidente come l’utilizzo dell’ordine e della priorità nei fogli di stile porti a lasciare le regole a bassa priorità (come le formattazioni sul tag body o sui link) nella cima mentre le regole più specifiche vengano definite per ultime.

Quando il gioco si fa duro…

Quando i css diventano molto complessi e articolati è facile perdere la percezione delle varie priorità e può non essere possibile risolvere modificando solo i selettori, non rimane quindi altra scelta che l’uso di !important

p{color:#000000 !important;}

L’utilizzo di questo metodo è sconsigliato in generale in quanto la proprietà acquisisce la priorità massima ma nel caso fosse utilizzato su più proprietà queste sarebbero tutte ad alta priorità rendendo vano lo sforzo per mantenere una gerarchia tra le varie regole definite nel foglio di stile.

Info su Mauro Accornero

Sviluppatore e Web Designer Freelance, lavora a Milano dove collabora con Agenzie di Comunicazione ed Aziende del settore. Docente presso la Nuova Accademia di Belle Arti a Milano dove tiene corsi in ambito web per il dipartimento di Graphic Design e Art Direction.
Questa voce è stata pubblicata in Articoli, Tutorial e contrassegnata con . Contrassegna il permalink.

Lascia un Commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

*

È possibile utilizzare questi tag ed attributi XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>