Corso HTML e CSS (Lez. 17): CSS, considerazioni generali

Impariamo a costruire un sito Web

Lezione 17: CSS: Considerazioni generali.

 

Prima di affrontare nei dettagli la scrittura di un foglio di stile seguendo un esempio pratico, diamo qualche consiglio e facciamo qualche considerazione di carattere generale.

A) CSS esterno o tag <style> interno?

Riprendiamo un concetto già espresso in precedenza per analizzare le eventuali differenze di comportamento.

Ci sono tre modi per dare uno stile ad un elemento html:

  • Foglio di stile CSS esterno
  • Tag <style>…</style> all’interno dell'<head>
  • Attributo standard style=”…” all’interno di un tag del <body>

A livello di funzionamento si equivalgono. Se vogliamo scrivere un paragrafo in colore rosso potremmo quindi scrivere:

<p style=”color:red;”>Questo paragrafo è scritto in rosso</p>  direttamente nel <body> del nostro documento html.

oppure possiamo scrivere:

<style type=”text/css”>
.rosso {color:red;}
</style>


 all’interno del tag <head>

e poi, all’interno del <body> scrivere così il nostro paragrafo:

<p class=”rosso”>Questo paragrafo è scritto in rosso</p>

opppure infine possiamo scrivere la stessa dichiarazione

.rosso {color:red;} all’interno di un foglio CSS (chiamiamolo stili.css)
richiamandolo nel documento html all’interno del tag <head> con la dichiarazione:

<link rel=”stylesheet” href=”stili.css”>

Detto che il risultato sarebbe lo stesso, dobbiamo però fare delle considerazioni sull’opportunità di usare uno o l’altro metodo.

La prima considerazione riguarda la velocità di caricamento delle pagine. Caricare la pagina html inserendo gli stili direttamente all’interno dei tag del body aumenta la dimensione della pagina html e di conseguenza il tempo di caricamento. Un foglio di stile CSS, invece, una volta caricato dal browser rimane nella cache del computer senza obbligare il browser a richiamarlo dal server ogni volta. Questo si traduce non solo in tempo risparmiato per gli utenti del sito, ma anche in minor banda usata che, a seconda del contratto col proprio provider, può essere un elemento che incide sui costi.

Una seconda considerazione riguarda la leggibilità del codice prodotto, che significa in definitiva facilità di manutenzione del sito. Tenere la pagina html più snella e riunire tutte le caratteristiche di stile e di disegno in un foglio separato, va in questa direzione e quindi è assolutamente consigliabile.

B) Gestiamo le priorità

Vediamo ora qual’è la scala di priorità con cui vengono esaminati gli stili. Può capitare infatti, in alcuni casi anche intenzionalmente, che ad un elemento venga attribuito uno stile generale e poi in una detrminata situazione gli si debba dare un diverso stile. Qui interviene la priorità di assegnazione degli stili così stabilita:

  1. Stile in-line (cioè all’interno del tag html)
  2. Stile definito nel tag <style> nella <head> del documento.
  3. CSS
  4. Default del browser

in ordine discendente di priorità, per cui lo stile definito in-line avrà sempre la priorità su qualsiasi altro stile definito per lo stesso elemento. Per quanto riguarda le priorità 2 e 3 specifichiamo che quanto indicato vale se gli stili definiti nell’ <head> sono inseriti dopo il richiamo al CSS. Nel caso contrario il CSS diventa prioritario.

Una dichiarazione più specifica assume poi priorità su quella più generica. Chiariamo con un esempio. Scriviamo in un CSS:

ul {color:black}
ul li {
color:red;
}

questo significa che una lista verrà sempre scritta in rosso perché ul li si riferisce agli elementi della lista ed è più specifica della dichiarazione ul che si riferisce semplicemente alla lista.

Un altro modo di assegnare una priorità ad una specifica dichiarazione è usare l’attributo !important. In questo modo l’attributo assume la massima priorità. Se scriviamo quindi in un CSS (o nella <head> del foglio html):

h1 {color:black !important}

h1.rosso {

color:red;

}

e nel <body>:

<h1 class=”rosso”>Questa testata è nera</h1>

perché le proprietà assegnate all’attributo con !important diventano prioritarie anche sulla successiva dichiarazione anche se questa è più specifica. Da notare che avrebbe priorità anche nel caso che nel <body> scrivessimo:

<h1 style=”color:red”>Questa testata è nera</h1>

C) Come organizzare i CSS

Realizzando un sito web complesso le dichiarazioni da includere in un foglio di stile CSS potrebbero diventare moltissime e allora ci si pone il problema se è meglio avere un unico CSS con tutti gli stili oppure separali in diversi files. Non può essere data una risposta univoca perché ci sono pro e contro.

– Riunire tutti gli stili in un unico files è consigliabile per ottimizzare le performance del sito in quanto limitando le chiamate http il tempo di caricamento della pagina diminuisce.

– Per contro se le dichiarazioni sono molto numerose, avere un unico files può complicare la manutenzione del CSS, non tanto per la rintracciabilità dei singoli stili, quanto per la difficoltà che può subentrare nella gestione delle priorità degli stili. La suddivisione logica dei fogli per omogeneità di contenuto (ad esempio si potrebbe fare un CSS per la stilizzazione dei testi, uno per i menu ecc.) potrebbe rendere più agevole il vostro lavoro di manutenzione.

– Un altro elemento di valutazione da tenere in considerazione è quante volte sono richiamati alcuni stili. Per esempio se abbiamo preparato degli stili per le tabelle, ma abbiamo un solo foglio html con tabelle, tutti questi stili potrebbero essere scorporati e richiamati solo nel foglio interessato snellendo così il CSS generale.

In definitiva un consiglio può essere quello di raggruppare in un unico foglio tutti gli stili comunque necessari, separando solo quelli necessari in una singola pagina, ma se la manutenibilità del CSS è per voi un problema e la pagina non presenta particolari difficoltà di caricamento (asttenzione alle dimensione delle immagini!) potete suddidere il CSS come meglio vi aggrada.