Il numero sempre crescente delle proprietà CSS disponibili (circa 280 al momento in cui scriviamo), l'uso di svariati prefissi per specificare un'unica proprietà (esempio: -webkit-border-radius, -moz-border-radius, border-radius) e l'abbondanza di framework CSS per uno sviluppo front-end sempre più massiccio e avanzato, portano spesso alla stesura di fogli di stile caotici e poco mantenibili.
È importante quindi seguire il più possibile gli standard ed adottare delle linee guida “per fare ordine” fra migliaia di righe di codice invece di accumulare a cascata nel file 'style.css' tutto quello che ci passa per la mente.
Le linee guida del documento Idiomatic CSS
Nicolas Gallagher è un front-end engineer che lavora per Twitter e ha preso parte a due progetti open-source molto apprezzati dalla comunità internazionale di sviluppatori quali Normalize.css e HTML5 Boilerplate. Ha anche scritto recentemente delle linee guida (non ufficiali) per la scrittura di codice CSS raccolte in un documento chiamato "Idiomatic CSS", tradotto in svariate lingue fra cui anche l'italiano. Il documento è diviso in 8 punti, vediamo i principali e, a mio avviso, i più interessanti:
Principi Generali
- Tutto il codice, in qualsiasi linguaggio sia, dovrebbe sembrare come scritto da una sola persona, non importa quante persone abbiano contribuito.
- Rispettare al massimo lo stile concordato.
- Se nel dubbio, usare modelle comuni ed esistenti.
Spazio vuoto
- Mai mischiare spazi e tabulazioni per i rientri.
- Scegliete tra rientri soft (spazi) o tabulazioni reali. Mantenete quella scelta (preferenza: spazi).
Suggerimento: configurate il vostro editor in modo da "visualizzare i caratteri invisibili". Questo vi permetterà di eliminare spazi vuoti di fine linea, eliminare linee vuote ed evitare commit pasticciati.
Commenti
- Un codice ben commentato è estremamente importante.
- Mettete i commenti su di una nuova linea che preceda il relativo soggetto.
- Evitate commenti a fine linea.
- Mantenete una lunghezza massima per le linee, es. 80 colonne.
- Fate libero uso di commenti per spezzare il codice CSS in sezioni più piccole.
- Usate commenti "sentence case" e rientri del testo consistenti.
Ecco un esempio:
/* ==========================================================================
Sezione blocco commento
========================================================================== */
/* Sotto sezione blocco commento
========================================================================== */
/*
* Gruppo blocco commento.
* Ideale per spiegazioni e documentazione multi linea.
*/
/* Commento base */Formato
Ecco gli 8 punti da tenere a mente per scrivere con chiarezza ed evitare la battitura di errori accidentali:
- Un solo selettore per linea in set di regole con più selettori.
- Un singolo spazio prima della parentesi graffa di apertura di un set di regole.
- Una dichiarazione per linea di un blocco dichiarazioni.
- Un livello di rientro per ogni dichiarazione.
- Un singolo spazio dopo i due-punti di una dichiarazione.
- Includete sempre un punto-e-virgola alla fine dell'ultima dichiarazione in un blocco dichiarazione.
- Mettete la parentesi graffa di chiusura di un set di regole, nella stessa colonna del primo carattere del set di regole.
- Separate ogni set di regole con una linea vuota.
Ecco un esempio:
.selector-1,
.selector-2,
.selector-3 {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: block;
color: #333;
background: #fff;
}Nel caso di blocchi di dichiarazione su una sola linea, si può usare la linea singola in questo modo:
.selector-1 { width: 10%; }
.selector-2 { width: 20%; }
.selector-3 { width: 30%; }Esempio pratico CSS idiomatico
Ecco un esempio completo di codice CSS "idiomatico", come da documento:
/* ==========================================================================
Grid layout
========================================================================== */
/*
* Example HTML:
*
*
*
*
*
*/
.grid {
overflow: visible;
height: 100%;
/* Prevent inline-block cells wrapping */
white-space: nowrap;
/* Remove inter-cell whitespace */
font-size: 0;
}
.cell {
box-sizing: border-box;
position: relative;
overflow: hidden;
width: 20%;
height: 100%;
/* Set the inter-cell spacing */
padding: 0 10px;
border: 2px solid #333;
vertical-align: top;
/* Reset white-space */
white-space: normal;
/* Reset font-size */
font-size: 16px;
}
/* Cell states */
.cell.is-animating {
background-color: #fffdec;
}
/* Cell dimensions
========================================================================== */
.cell-1 { width: 10%; }
.cell-2 { width: 20%; }
.cell-3 { width: 30%; }
.cell-4 { width: 40%; }
.cell-5 { width: 50%; }
/* Cell modifiers
========================================================================== */
.cell--detail,
.cell--important {
border-width: 4px;
}Organizzazione
- Separate logicamente parti distinte di codice.
- Usate file separati (concatenati in un passaggio durante la generazione) per aiutarvi a suddividere il codice in componenti distinte.
Conclusioni
Questa “guida di stile” favorisce l'utilizzo di modelli già esistenti che aiutano la condivisione e la diffusione del codice. Sono un validissimo aiuto a chi si sta formando come Web Designer e come Front-end Developer e un ottima “boccata d'aria” per tutti i professionisti che stanno passando gradualmente, non senza problemi di sorta, da CSS2 a CSS3.
Il documento comunque è open, quindi chi volesse contribuire può farlo inviando il suo suggerimento all'autore tramite Github!
