Scrivere codice css ordinato e comprensibile

In questo articolo ti segnalo i punti salienti del documento - Princìpi per la scrittura di CSS consistente ed idiomatico - pubblicato da Nicolas Gallagher, dove espone delle linee guida per impostare un codice css comprensibile. Ovviamente non si tratta di regole uffciali ma ti assicuro che sono degli ottimi consigli da tenere sempre sotto mano.
Scrivere codice css ordinato e comprensibile

Che confusione

Un’esperienza che sicuramente non manca alla maggior parte dei web designer è aver messo mano ad un codice css sviluppato da altri. Spesso ci ritroviamo in un accatastamento di proprietà, spaziatura inserita a caso che confonde la lettura e nemmeno l’ombra di un commento per descrivere il codice.

Apportiamo le dovute modifiche

Princìpi generali

  1. Tutti i tipi di codice dovrebbero sembrare scritti da una sola persona, anche se ne hanno contribuito molte di più.
  2. Rispetta al massimo la formattazione dello stile.
  3. Nel dubbio, usa modelli comuni già impostati.

Spazio vuoto

  1. Scegli tra spazi e tabulazioni per i rientri. E sii coerente nel loro utilizzo.
  2. Mai mischiare spazi e tabulazioni.
  3. Se usi gli spazi, scegli il numero di caratteri usati per il livello di rientro (preferenza: 4 spazi).

Commenti

  1. Inserisci i commenti su di una nuova linea che preceda il relativo soggetto.
  2. Evita commenti a fine linea.
  3. Mantieni una lunghezza massima per le linee.
  4. Fai libero uso di commenti per spezzare il codice CSS in sezioni più piccole.
  5. Usa commenti dettagliati e rientri del testo consistenti.

Formato

  1. Usa un solo selettore per linea in un set di regole con più selettori.
  2. Usa un singolo spazio prima della parentesi graffa di apertura di un set di regole.
  3. Usa una dichiarazione per linea in un blocco dichiarazioni.
  4. Usa un livello di rientro per ogni dichiarazione.
  5. Usa un singolo spazio dopo i due-punti di una dichiarazione.
  6. Includi sempre un punto-e-virgola alla fine dell’ultima dichiarazione in un blocco dichiarazione.
  7. Metti la parentesi graffa di chiusura, nella stessa colonna del primo carattere del set di regole.
  8. Separa ogni set di regole con una linea vuota.
  9. Nelle dichiarazioni composte da una sola linea, metti uno spazio dopo la parentesi graffa di apertura e prima di quella di chiusura.

Organizzazione

  1. Separa logicamente parti distinte di codice, aiutandoti anche con file separati.
  2. Se usi un preprocessore, estrapola in variabili il codice comune per colore, tipografia, ecc.
Search
Tags
Seleziona rubrica
Seleziona rubrica
Codice Github