Saper scrivere codice CSS ben strutturato e organizzato richiede innanzitutto una buona esperienza sul campo. Infatti, solo grazie al lavoro e alla sperimentazione, risolvendo gli ostacoli che si ’incontrano durante lo sviluppo (compatibilità cross-browser docet), miglioreremo i nostri fogli di stile rendendoli più curati, eleganti e sopratutto funzionali.
La complessità del sito è la principale variabile da tenere in considerazione quando si scrive codice CSS. Un'analisi attenta del progetto ci consentirà di organizzare il nostro codice nel modo migliore e specifico per il progetto in questione. Teniamo conto che le caratteristiche e le funzionalità di un sito finiscono per evolvere e cambiare nel tempo, richiedendone magari di nuove e più complesse. La struttura e l'organizzazione del codice CSS devono pertanto potersi adattare in modo semplice e veloce a ogni tipo di modifica.
Suddividere per cominciare
Una buona abitudine è quella di suddividere il nostro codice in più fogli di stile. In questo modo potremmo gestire aggiornamenti o modifiche in poco tempo e con maggiore facilità. Utilizziamo:
- screen.css, per la visualizzazione del sito su un monitor;
- print.css, un css per la stampa;
- ie.css, un css separato per la compatibilità cross-browser su Internet Explorer;
- typography.css, un CSS dedicato alla tipografia (opzionale).
Leggibilità vs Funzionalità, due approcci differenti
Il primo approccio è quello improntato alla leggibilità. File CSS di grandi dimensioni sono difficili da gestire e solo una buona organizzazione ci permette di mantenere il codice leggibile e facilmente modificabile secondo nuove esigenze. Suddividiamo allora in aree il nostro file screen.css:
1) Stili Generici
reset: eliminiamo le impostazioni di default dei browser
body: regole generali per l'elemento body
links: stili per i link del sito
intestazione: stili per i titoli h1, h2, h3, h4, h5, h6
classi custom: classi aggiuntive da poter utilizzare nel sito (es. le classi per l'allineamento del testo e delle immagini)
2) Struttura della Pagina
In questa parte definiamo gli stili per gli elementi strutturali del layout uguali in tutte le pagine del sito. Ad esempio:
header
main
sidebar
navigation
footer
3) Componenti
Sono gli stili per ciascun elemento della pagina.
L'obiettivo di questa operazione è quello di organizzare il CSS per aree logiche scrivendo un codice compatto, leggibile e mantenibile, raggruppando gli stili dei tag secondo la natura di questi ultimi. È fondamentale progettare il sito utilizzando sfruttando la proprietà semantica dell'(X)HTML, assegnando poi le proprietà CSS direttamente sul singolo tag.
Vediamo un esempio semplice ma utile per capire:
<div class="article">
<h2>Titolo dell'articolo</h2>
<p>Testo dell'articolo, questo è un testo finto. Link a un altro <a>articolo</a>.</p>
</div>
Il modulo article preso ad esempio utilizza un tag h2 per il titolo, un <p> per il testo il quale racchiude un link <a>.
Gli stili necessari alla formattazione degli elementi saranno quindi disposti ciascuna nella propria sezione logica creata secondo lo schema visto in precedenza:
/* BODY */
p {
font-size: 12px;
line-height: 18px;
}
/* LINKS */
a, a:link, a:visited {
color: #000;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
/* INTESTAZIONI */
h1 {....}
h2 {
font-size: 22px;
line-height: 24px;
color: #333;
}
/* ARTICLE */
.article {
margin: 10px 0;
padding: 10px;
}
L'esempio preso in considerazione è banale, ma è importante per capire l'approccio da seguire nello sviluppo dei fogli di stile. In questo modo, infatti, limitiamo al massimo la ripetizione di stili CSS, massimizzando invece l'ottimizzazione e la condivisione di questi tra diversi elementi dell'interfaccia.
Il livello di complessità del layout ricoprirà comunque un ruolo fondamentale e influenzerà la scelta di quale approccio adottare. Un buon design, infatti, deve essere progettato pensando in anticipo le relazioni tra gli elementi che andranno a comporre l'interfaccia. In questo modo la scrittura del codice HTML e CSS sarà più semplice e meno soggetta a problemi di conflitti di stili.
Approccio funzionale
Un approccio completamente diverso ha come obiettivo la funzionalità dei fogli di stile.
Che cosa intendiamo? La leggibilità, l'organizzazione e, se così si può dire, la bellezza del nostro codice può interessarci fino a un certo punto. Quello che conta è che questi siano funzionali al layout progettato.
In questo approccio scriviamo il codice procedendo per sezioni del sito. Analizziamo lo screenshot di seguito.
Un ipotetico sito di e-commerce, layout a due colonne con header, una colonna main (verde scuro), la sidebar (verde chiaro) e il footer a chiudere.
Concentriamoci sugli elementi di nostro interesse:
1) #MENU e #LINKS condividono l'elemento <ul>; le voci del menu e la lista di link infatti potrebbero essere entrambi delle liste. Seguendo l'approccio precedente avremmo dovuto definire uno stile unico, scritto ad esempio nell'area body e condiviso. Così facendo non avremmo dovuto scrivere per ciascun modulo lo stesso stile.
Invece, secondo l'approccio funzionale, scriveremo:
/* MENU */
#menu ul {...}
#menu ul li {...}
#menu ul li a {...}
/* LINKS */
#links ul {...}
#links ul li {...}
#links ul li a {...}
2) #PREVIEW è un modulo che contiene l'anteprima degli ultimi prodotti usciti sul mercato. #PRODUCTS contiene invece tutti i prodotti presenti nel db del sito. L'elemento thumb, qui evidenziato, è lo stesso per entrambi, eppure scriveremo:
/* PREVIEW */
#preview img.thumb {...}
/* PRODUCTS*/
#products img.thumb {...}
In entrambi gli esempi ripetiamo la stessa parte di codice applicata a elementi diversi nel layout, che questi condividano o meno gli stessi stili CSS. Questo perché, se nell'evoluzione del layout avessimo bisogno di cambiare la formattazione di un solo modulo potremmo farlo senza che ciò influenzi altri elementi della pagina.
È evidente dunque come, nell'utilizzare l'approccio funzionale, il nostro file CSS non brillerà certo per organizzazione e pulizia. Sicuramente ci consentirà di gestire in totale autonomia qualunque parte del sito.
Per approfondire la conoscenza di questa tecnica consiglio di analizzare il codice CSS del sito gist.github.com, il quale è stato il punto di partenza per la mia riflessione.
Mantenibilità
Qualunque approccio si scelga di adottare durante la scrittura del codice CSS non bisogna mai perdere di vista la mantenibilità di quest'ultimo. Per questo motivo è fondamentale utilizzare i commenti come strumento di suddivisione delle diverse aree:
/* ----------------------------*/
/* PAGE ELEMENTS */
/* ----------------------------*/
/* ---------------------------*/
/* LOGO */
/* ---------------------------*/
/* NAVIGATION */
/* ---------------------------*/
/* SIDEBAR */
Grazie anche all'indentazione del codice, strizzando l'occhio a HTML, riusciamo a ottimizzare lo spazio e ad ottenere una maggiore facilità durante la scansione visiva del documento.
