Nel bene o nel male, i CSS sono ormai entrati a fare parte dell’esperienza quotidiana di un buon web designer. Oggi vogliamo suggerirvi alcuni trucchi per semplificare il lavoro e per produrre un foglio di stile facilmente leggibile e modificabile (caratteristica estremamente importante non solo nell’eventualità di doverlo modificare in futuro, ma soprattutto nel caso in cui si rilasci un template o comunque un lavoro sul quale dovranno mettere le mani altre persone).

1. Utilizzare i rientri (”indent”) per agevolare la lettura

#main {
width: 500px;
height: 200px;
}

#main img {
border: none;
}
#main p {
line-height: 19px;
}

Questa pratica è particolarmente utile perchè ad un primo colpo d’occhio consente di individuare subito gli elementi principali del foglio di stile.

2. Raggruppare e commentare
E’ buona regola ordinare il foglio di stile per aree: ad esempio, si possono mettere all’inizio tutte le regole generiche (body, div, p, img), successivamente la testata, il corpo della pagina, la chiusura di pagina, e le classi personalizzate.
Questa tecnica velocizza enormemente le operazioni di modifica: se ad esempio dovete andare a modificare il DIV contenente il logo del vostro sito, potete andare a cercarlo direttamente nella sezione relativa alla testata del sito; in caso contrario sareste costretti a scorrere tutto il foglio per cercarlo o ad utilizzare la funzione “trova” dell’editor.
Ogni sezione dovrebbe poi essere aperta con un commento che ne specifica nome e funzionalità:

*/---------------------------- */
*/ Testata - Inizio della pagina, logo, menu di navigazione */
*/---------------------------- */

3. Scrivere le diverse proprietà su una sola riga e abbreviare ove possibile
Invece di adottare una scrittura di questo tipo:

body {
background-color: #900;
background: url(immagine.jpg) no-repeat top center;
font-family: Arial;
font-size: 12px;
font-weight: normal;
}

è possibile usarne un’altra:

body { background: #900 url(immagine.jpg) no-repeat top center; font: normal 12px Arial; }

4. Suddividere il foglio di stile in più parti
Può essere utile dividere il foglio di stile in più parti (ad esempio: una per il layout, una per i colori, una per i font) successivamente richiamare queste parti dal foglio di stile principale, usando la seguente sintassi:

#main {
@import "nomefoglio.css";
}

E’ lo stesso approccio che si usa quando si programma in PHP, in ASP o in qualunque altro linguaggio e si includono, ad esempio, i files contenenti le impostazioni di configurazione per il database. Questa tecnica, se applicata a parti di codice che ricorrono spesso nei nostri fogli di stile, ci consente di risparmiare parecchio tempo.

5. Effettuare un “reset” degli elementi
Per reset degli elementi si intende l’impostare, all’inizio del foglio di stile, alcune proprietà valide per ogni elemento della pagina. Questa tecnica è abbastanza importante perchè evita che il browser, ad esempio, aggiunga un margine o un padding ai nostri titoli, per impostazione predefinita o per interpretazione errata del codice.
Ecco come procedere:

* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}

Alcuni designer consigliano, piuttosto che usare il selettore generico (l’asterisco), di specificare uno per uno gli elementi ai quali si intende applicare il reset (html, body, p, div, span, ul, ecc.)

6. Annotare lo schema dei colori
Può essere utile annotare lo schema dei colori utilizzato, per averlo sottomano durante la stesura del codice o per agevolare chi dovrà modificare successivamente il vostro foglio di stile.
Solitamente si aggiunge all’inizio del foglio sotto forma di commento (come per i titoli delle sezioni al punto 2).

7. Utilizzare un sistema di denominazione degli elementi
E’ bene stabilire ed utilizzare dei criteri ricorrenti nel denominare gli elementi. Uno dei possibili metodi consiste nell’usare una struttura padre/figlio. Supponiamo che il DIV iniziale della vostra pagina sia chiamato header, e che il DIV contenente il logo del sito sia chiamato logo. Per rendere più comprensibile il tutto si può usare una scrittura di questo tipo:

#header {
margin: 0px auto;
width: 900px;
height: 200px;
}

#header_logo {
float: left;
width: 200px;
height: 60px;
}

8. Elencare le proprietà in ordine alfabetico
Questa tattica si rivela estremamente utile qualora abbiate deciso di scrivere il codice su una sola riga, come suggerito al punto 3.

body { background: #333; font: normal 12px arial; margin: 0; padding: 0; }



Altri articoli che potrebbero interessarti