COME RAGGRUPPARE GLI STILI IN CSS

Per mantenere i fogli di stile brevi e facili da modificare, è possibile raggruppare regole simili. La possibilità di raggruppare gli stili, offre diversi modi per specificare un insieme di regole condivise.

Ad esempio si potrebbe avere il testo di due intestazioni diverse (h1 e h2) in blu e lo sfondo nero.

Indice

1. Raggruppare i selettori
2. Raggruppare le dichiarazioni
3. Raggruppare i selettori e le dichiarazioni

1. Raggruppare i selettori

I selettori possono essere raggruppati separandoli con una virgola. Questa tecnica applicherà la dichiarazione ad entrambi i selettori.

h1, h2{
    color: blue;
}

h1, h2{
    background: black;
}

2. Raggruppare le dichiarazioni

Le dichiarazioni possono essere raggruppate sotto un unico selettore, separandole con un punto e virgola.

Tutti gli stili all'interno del blocco di dichiarazione verranno applicati a quello specifico selettore.

h1{
    color: blue;
    background: black;
}

h2{
    color: blue;
    background: black;
}

3. Raggruppare i selettori e le dichiarazioni

Infine è possibile combinare insieme sia i selettori che le dichiarazioni, creando in questo modo un'unica regola. Questa tecnica offre il modo più breve ed efficace per scrivere queste regole.

h1, h2{
    color: blue;
    background: black;
}

I selettori che hanno dichiarazioni uguali, dovrebbero avere questo tipo di raggruppamento onde evitare ridondanza negli stili e confusione.

Quest'ultima tecnica ha un vantaggio in termini di prestazioni perché è decisamente più breve, riducendo le dimensioni del foglio di stile e risultando conseguentemente più veloce nel caricamento del file CSS.

Conclusione

Raggruppare i selettori con stili simili, facilita il mantenimento dei fogli di stile nel tempo ed evita confusione.