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