Il seguente documento espone una ragionevole guida di stile per lo sviluppo in CSS. Esso non è inteso per essere un rigido regolamento e non voglio imporre le mie preferenze di stile sul codice degli altri. A parte tutto, queste linee guida incoraggiano fortemente l’utilizzo di ragionevoli modelli comuni e già esistenti.
Parte dell’essere un buon amministratore per un progetto di successo è capire che la scrittura di codice per sé stessi è una Cattiva Idea™.
Se migliaia di persone usano il tuo codice, allora scrivi il tuo codice in modo che abbia la massima chiarezza, e non seguendo i tuoi gusti personali su come renderlo chiaro all’interno delle specifiche.[icon name=”user-md” class=”” unprefixed_class=””] — Idan Gazit
- 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 modelli comuni ed esistenti.
- Mai mischiare spazi e tabulazioni per i rientri.
- Scegliete tra rientri soft (spazi) o tabulazioni reali. Mantenete quella scelta (preferenza: spazi).
- Se usate gli spazi, scegliete il numero di caratteri usati per il livello di rientro (preferenza: 4 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.
Lo stile di un commento dovrebbe essere semplice e consistente all’interno di una singola base di codice.
- 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.
Suggerimento: configurate il vostro editor così che vi fornisca delle scorciatoie per la stampa dei modelli di commento scelti.
Un codice di esempio
/* ======================================================
Sezione blocco commento
====================================================== */
/* Sotto sezione blocco commento
====================================================== */
/*
* Gruppo blocco commento.
* Ideale per spiegazioni e documentazione multi linea.
*/
/* Commento base */
// ======================================================
// Sezione blocco commento
// ======================================================
// Sotto sezione blocco commento
// ======================================================
//
// Gruppo blocco commento
// Ideale per spiegazioni e documentazione multi linea.
//
// Commento base
- 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.
.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;
}
Un codice di esempio
.selector {
position: relative;
display: block;
width: 50%;
height: 100px;
padding: 10px;
border: 0;
margin: 10px;
color: #fff
background: #000;
}
Un codice di esempio
.selector-1 { width: 10%; }
.selector-2 { width: 20%; }
.selector-3 { width: 30%; }
Un codice di esempio
.selector {
box-shadow:
1px 1px 1px #000,
2px 2px 1px 1px #ccc inset;
background-image:
linear-gradient(#fff, #ccc),
linear-gradient(#f3c, #4ec);
}
- Usate valori esadecimali con lettere minuscole, es.,
#aaa
. - Usate in modo consistente gli apici singoli o doppi. La preferenza è per i doppi apici, es.,
content: ""
. - Racchiudete sempre tra apici i valori degli attributi nei selettori, es.,
input[type="checkout"]
. - Dove permesso, evitate di specificare l’unità di misura per i valori pari a zero, es.,
margin: 0
.
- Limitate la nidificazione ad 1 livello di profondità. Riarrangiate qualsiasi livello di nidificazione che sia più di 2 livelli di profondità. Questo previene selettori CSS eccessivamente specifici.
- Evitate di usare un numero elevato di regole nidificate. Spezzettatele in più parti quando vedete che la leggibilità inizia ad essere compromessa. La preferenza è di evitare nidificazioni che coinvolgano piùdi 20 linee.
- Mettete sempre l’istruzione
@extend
alla prima linea del blocco dichiarazioni. - Dove possibile, raggruppate le istruzioni
@include
in cima al blocco dichiarazioni, dopo tutte le istruzioni@extend
. - Considerate di prefissare le funzioni proprietarie con una
x-
o altro namespace. Questo vi aiuterà ad evitare ogni possibilità di confondere la vostra funzione con una funzione CSS nativa, o andare a scontrarsi con le funzioni di altre librerie.
.selector-1 {
@extend .other-rule;
@include clearfix();
@include box-sizing(border-box);
width: x-grid-unit(1);
// altre dichiarazioni
}
Usate nomi chiari ed esplicativi per le classi HTML. Scegliete un modello di nomenclatura che sia capibile e consistente, e che abbia un senso sia per i file HTML che CSS.
Un codice di esempio
/* Esempio di codice con nome non corretti */
.s-scr {
overflow: auto;
}
.cb {
background: #000;
}
/* Esempio di codice con nomi corretti */
.is-scrollable {
overflow: auto;
}
.column-body {
background: #000;
}
Un codice di esempio
/* ======================================================
Grid layout
====================================================== */
/*
* Example HTML:
*
* <div class="grid">
* <div class="cell cell-5"></div>
* <div class="cell cell-5"></div>
* </div>
*/
.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;
}
- 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.
- Se usate un preprocessore, astraete in variabili il codice comune per colore, tipografia, ecc.
Ancora nessun commento