Scrivere codice CSS ordinato

Molte volte capita di scrivere un codice CSS per amici, colleghi, collaboratori o clienti affezionati. Cosa succede? Ci immergiamo nel codice e scriviamo secondo i nostri standard e il nostro estro senza essere ordinati e precisi; tanto, pensiamo: “nel mio codice ci devo capire solo io”. Il fatto e’ che, una volta terminato il codice, a distanza di tempo,  quando dobbiamo rimetterci mano, siamo rovinati, non capiamo piu’ niente. Questo significa che dobbiamo prestare attenzione nella stesura del codice. Prendiamo in causa, solo per un attimo, il codice Html; quello segue una sintassi che chiunque capisce, e’ organizzato, ordinato e sempre comprensibile. Il CSS no! Ogni sviluppatore scrive nel suo formato preferito, chi usa la singola linea e chi usa la multi linea. Ogni volta che apro un file CSS mi metto le mani nei capelli e mi devo armare di una pazienza infinita.

Nuova linea di pensiero

Dobbiamo iniziare a scrivere CSS che tutti possano comprendere e utilizzare con facilita’. Organizziamo il codice che scriviamo e siamo piu’ precisi e ordinati nel farlo. Infatti,non si sa mai, il nostro codice potrebbe essere passato ad un’altra agenzia, oppure dobbiamo far finire la stesura del CSS da un collaboratore. Insomma, tanto per dire che l’organizzazione e’ alla base di tutto e la prima impressione e’ quello che conta; quindi noi web designer, a chiunque vada il nostro CSS, dobbiamo sempre fare una bella figura e far si che il nostro codice, a colpo d’occhio, sprizzi professionalita’ e ordine.

Righe di commento

Dobbiamo commentare le linee di codice, sia per facilitare il lavoro altrui, sia per aiutare noi stessi nel ritrovare il capo e la coda del progetto. E vedrete che quando commentiamo il nostro codice, la stesura dello stesso risultera’ piu’ pulita perche’ la scrittura del commento ci ricorda che qualcuno potrebbe leggere il nostro CSS.

Codice multi riga

La stesura del codice deve essere fatta multi riga, infatti assicura che la dichiarazione sia inserita e chiusa bene. Si legge meglio ed e’ piu’ intuitivo visualizzare degli errori.

Ordinare il codice

Ordiniamo le sezioni che compogono il file CSS in gruppi definiti, con titoli. Il nostro lavoro sara’ piu’ ordinato e sappremo mettere le mani al codice piu’ velocemente e senza possibilita’ di errore.

/*------------------------------------*\
 CONTENTS
\*------------------------------------*/
/*
MAIN
TYPE
IMAGES
TABLES
MISC
RESPONSIVE
*/

/*------------------------------------*\
 $MAIN
\*------------------------------------*/
html {
 styles
}

body {
 styles
}

/*------------------------------------*\
 $TYPE
\*------------------------------------*/

La sezione Condivisione o Shared

Ogni CSS dovrebbe avere una sezione di condivisione, in cui i selettori si legano ad un ‘unica dichiarazione; per capirci meglio ecco un esempio:

/*------------------------------------*\
 $TYPE
\*------------------------------------*/
h1 {
 font-size: 2em;
 color: #c00;
}

h2 {
 font-size: 1.5em;
 color: #c00;
}

a {
 color: #c00;
 font-weight: bold;
}

#tagline {
 font-style: italic;
 color: #c00;
}

Usando la sezione Shared, ecco il risultato:

/*------------------------------------*\
 $TYPE
\*------------------------------------*/
h1 {
 font-size: 2em;
}
h2 {
 font-size: 1.5em;
}
a {
 font-weight: bold;
}
#tagline {
 font-style: italic;
}

/*------------------------------------*\
 $SHARED
\*------------------------------------*/
h1, h2, a, #tagline {
 color:#c00;
}

Abbiamo raggruppato tutti i colori dei selettori all’interno della sezione Condivisione. Semplice no?

Il gioco e’ fatto: questo articolo e’ solo un umile suggerimento agli sviluppatori di CSS in maniera che possano scrivere i loro codici piu’ comprensibili, gestibili e facilmente elaborabili.

Se avete degli altri suggerimenti, aggiungeteli nei commenti.