Benvenuto! Se sei un nuovo visitatore ti consiglio di iscriverti al mio Feed RSS in modo da essere sempre aggiornato riguardo l'uscita di nuovi articoli oppure sbirciare tra i tutorials ed i progetti.
Per avere un'idea del best-content presente in questo blog puoi leggere il post intitolato "Ed ora è il momento di rilanciare alcune iniziative! (1a parte e 2a parte)".
Buona navigazione e grazie per la visita!

Requisiti

• Sapere cos'è un CSS
• Aver già creato un file CSS

Introduzione

L'organizzazione è un aspetto molto importante che risulta essere rilevante in ogni progetto (grande o piccolo che sia) che si ha intenzione di portare a termine.
Naturalmente l'esperienza aiuta moltissimo nella creazione di un "metodo" che permetta allo sviluppatore di ridurre al minimo i tempi di sviluppo, facilitare la lettura dei risultati e soprattutto rendere le successive modifiche il meno invasive possibili.
Questo tutorial ha lo scopo di dare la giusta enfasi ad alcuni aspetti organizzativi che interessano la creazione di un foglio di stile CSS.

I commenti

I commenti hanno sempre giocato un ruolo secondario nella scrittura di codice appunto perchè non rientrano in quest'ultima definizione.
Durante lo sviluppo di un foglio di stile sappiamo benissimo la funzione di ciascuna riga ma se ci ritorniamo dopo alcune settimane molto probabilmente ci verrà l'istinto di sbattere la testa contro il monitor.
Inoltre non è da escludere il fatto che chi modificherà un file CSS non necessariamente ne è l'autore.
Un esempio di commento molto utile è il seguente:

Un utilizzo alternativo dei commenti è quello di marcare il CSS indicandone la versione, licenza ed altri aspetti di contorno.

Ciò risulta molto utile nel caso in cui si voglia specificare la possibilità di modifica, diffusione da parte di altre persone.

L'importanza di scegliere i nomi degli stili

Come già sappiamo possiamo far riferimento ad una classe (usando ".") o ad un ID (usando "#") e assegnargli un determinato stile di formattazione.
Che regole possiamo seguire per decidere il nome delle classi o degli ID?

• Utilizzare nomi che rispecchino lo scopo e non l'apparenza dello stile: evitare quindi di utilizzare classi (o ID) come .titoloVerde, .testoCorsivo che facciano riferimento al tipo di formattazione.
  Si consiglia invece di mettere in evidenza lo scopo dello stile e quindi privilegiare nomi come .titolo, .notaImportante, .commento, ecc... Perchè? Per il motivo che in un futuro non sarà sempre garantita la corrispondenza apparenza-nome, ad esempio cambiando i titoli in rosso e non più in verde.
• Non usare nomi che facciano riferimento a posizioni: in un certo senso è molto simile al primo punto; in questo caso si sconsigliano nomi come .barraSinistra, .immagineTop, ecc... consigliando invece nomi come .banner, .menu, ecc...
• Evitare nomi insignificanti: A discapito della dimensione finale del file è utile utilizzare nomi che abbiano un significato evitando quindi nomi come .z7, .tr1, ecc...

Utilizzare classi multiple

L'utilizzo di classi multiple facilita di molto la gestione e la creazione dei CSS.
Immaginiamo di avere un form dove alcuni campi sono obbligatori ed altri no:

Questo spezzone di codice XHTML obbliga la creazione di 3 stili che hanno in comune alcune righe di formattazione (e quindi c'è ridondanza):

La ridondanza, in qualsiasi codice sia presente, è sempre una zavorra di negatività visto che porta lo sviluppatore a dover modificare allo stesso modo più righe, gestire le incongruenze e molti altri fastidi.
L'utilizzo multiplo delle classi ci viene in aiuto:

Come potete notare a 2 DIV ho associato 2 classi (non c'è un limite) che mi rendono la composizione del CSS molto più efficiente:

In questo caso non esiste alcuna ridondanza (se non voluta) e quindi se vogliamo modificare l'aspetto di tutti i campi basta fare una singola modifica e non perderci tra le centinaia di righe del CSS.

Sfruttare l'ereditarietà

Il titoletto dice tutto: un modo per rendere il codice molto più leggibile e leggero è quello di sfruttare a pieno l'ereditarietà degli stili.
Evitare situazioni del genere:

A favore di:

Questa è pura organizzazione che rende il codice molto più facile da vedere e quindi da gestire (portando con se molti vantaggi pratici).

Conclusioni

Naturalmente questa mini-guida non ha la presunzione di definirsi completa ma quella di dare la giusta importanza all'ordine e alle metodiche di sviluppo di un foglio di stile CSS (da notare comunque come alcuni consigli valgono per qualsiasi codice).
La vita sarà facile se ce la rendiamo facile...