CSS  »  Articoli  »  Mondo CSS 

La compattazione limite

Potremo ancora limare il peso del nostro foglio adottando una compattazione estrema, eliminando ulteriori spazi. Ecco l' esempio sopra ancora più compattato:

a{text-decoration: none;border: 1px solid #000;padding: 0 2px;
    background-color: #ccc;color: #000}
a:hover{border: 1px solid #ccc;background-color: #fcc;color: #0f0}
blockquote{border-left: 5px solid #ccc;margin: 0 2em 0.5em;padding-left: 0.3em;
     font: italic 1em/1.2em arial,sans-serif}

In questo caso l' unico spazio che abbiamo lasciato è tra la proprietà e il valore. Questo facilita la lettura del foglio di stile. Infatti possiamo individuare velocemente ogni coppia proprietà: valore grazie ai due punti e lo spazio successivo: la proprietà sarà alla sua sinistra, e il valore sulla destra. Usando questo tipo di codifica, abbiamo risparmiato il 25% di peso circa rispetto al codice indentato.

Fogli di stile esterni

Due parole sull' organizzazione pratica dei fogli di stile. Per mantenere una netta separazione in fase di scrittura sarebbero da evitare gli stili in linea. Se vogliamo avere un unico file aperto per comodità di eding si possono utilizzare i fogli di stile incorporati (dichiarati nella sezione head della pagina html). A lavoro finito, è comunque bene portare tutte le regole del foglio di stile esterno, e usare la proprietà @import (o il tag link) per linkare il foglio di stile.Usare un foglio di stile esterno ha due vantaggi principali: consente una centralità del nostro css, così da poterlo linkare su più pagine html, e consente il caching del nostro file css nei browsers degli utenti. Infatti i file css, come le pagine html, vengono messi nei file temporanei del browser. Se le pagine che adottano un foglio di stile sono dieci, o cento, le regole css del nostro sito verranno comunque caricate dai visitatori una volta sola, anzichè essere trasferite assieme ad ogni pagina visitata.

A proposito di centralità: è una buona pratica adottare un singolo foglio di stile per un intero sito. Questo consente una maggiore facilità di editing e modifica, e soprattutto garantisce una consistenza stilistica tra le pagine.

Due buone pratiche da non dimenticare mai parlando di fogli di stile

Ci tenevo a ricordare due buone pratiche che, con il passare del tempo, diventano abitudine comune del webdesigner:

• Validare il foglio di stile - Ecco la pagina del validatore.
• Testare il lavoro sul maggior numero di browsers e garantire una rappresentazione degna sui più diffusi (Internet Explorer 5.x e 6, Opera e Mozilla)

La "checklist" per un foglio di stile ottimizzato

In chiusura, rivediamo brevemente i punti chiave dell' articolo:

• Studiare i fogli di stile
• Se non si conoscono tutte le proprietà e i valori, usare una quick reference
• Usare le scorciatoie e le proprietà a valori multipli
• Quando possibile, scrivere i colori con tre cifre
• Evitare le proprietà ininfluenti
• Ordinare le proprietà all' interno di ogni regola
• Usare il raggruppamento parziale solo sotto certe condizioni
• Usare il minor numero di proprietà nei selettori di tipo
• Usare il minor numero di classi possibile
• Usare gli id e i selettori discendenti
• Usare nomi significativi per classi e id
• Ordinare le regole
• Commentare le varie sezioni del foglio di stile
• Usare il minor numero di commenti possibile
• Commentare dichiarazioni chiave o hack
• Indentare le regole per fogli di stile brevi o a fini didattici
• Compattare i fogli di stile in casi reali
• Usare css esterni a lavoro finito
• Usare un solo css esterno per un intero sito
• Validare il foglio di stile
• Testare il lavoro sul maggior numero di browsers

Per concludere, ecco un esempio di foglio di stile ottimizzato secondo i criteri espressi nel corso dell'articolo.

Altri articoli

Altre guide

Altre newsletter