Il CSS è un linguaggio che non è difficile da utilizzare, ma se lo si utilizza per un progetto di grandi dimensioni, si possono incontrare difficoltà nella gestione se non si segue un metodo definito. Ecco alcuni suggerimenti che ti aiuteranno a scrivere meglio e faciliteranno la gestione del codice CSS.


1. Non utilizzare Global Reset

L’utilizzo del reset globale per eliminare i margini di default e il padding da tutti gli elementi HTML è assolutamente da evitare. Non solo è un metodo lento e inefficiente, ma si dovranno definire i margini e il padding per ogni elemento che ne necessita. Utilizzare invece un sottoinsieme che reimposta  il CSS.

Codice Non Corretto

*{ margin:0; padding:0; }

Codice Consigliato

html, body, div, dl, dt, dd, ul,  h1, h2, h3,  pre, form, label, fieldset, input, p, blockquote, th, td { margin:0; padding:0 }
table { border-collapse:collapse; border-spacing:0 }
fieldset, img { border:0 }
ul { list-style:none }

2. Non utilizzare IE Hacks

Se da un lato, l’utilizzo dell’hack CSS potrebbe essere utile per mantenere un aspetto coerente del sito web su browser più vecchi come IE6, allo stesso tempo può presentare una serie di problemi nelle versioni recenti di IE, come ad esempio IE8 non supportando gli standard CSS ad un buon livello,con l’hack potrebbe rovinare il layout. Si dovrebbe utilizzare le istruzioni condizionali, invece di indirizzare specifiche versioni di Internet Explorer.
Ad esempio, utilizzando il seguente righe di codice all’interno del tag <head> caricherà il iestyles.css file solo quando il browser è Internet Explorer versione 6 o inferiore.

Codice Consigliato

<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="styles/ie-styles.css" />
<![endif]-->

3. Utilizzare CSS ereditari

Se più elementi child di un elemento parent utilizzano gli stessi stili della tua pagina web, è meglio definire solo l’elemento principale che lascerà in eredità a tutti gli elementi che lo compongono. In questo modo sarete in grado facilmente di aggiornare il codice in modo semplice in seguito e anche di ridurre le dimensioni del file CSS in modo considerevole.

Codice Non Corretto

#contenuto li{ font-family:Georgia, serif; }
#contenuto p{ font-family:Georgia, serif; }
#contenuto h1{font-family:Georgia, serif; }

Codice Consigliato

#contenuto { font-family:Georgia, serif; }

4. Combina Selettori Multipli

È possibile combinare più selettori CSS in uno se hanno in comune gli stessi stili. Questo ti farà risparmiare tempo e spazio.

Codice Non Corretto

h1{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }
h2{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }
h3{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }

Codice Consigliato

h1, h2, h3{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }

5. Utilizzare le proprietà abbreviate

Utilizzare le proprietà dei CSS in modo abbreviato per velocizzare la scrittura del codice CSS e ridurre la dimensione del file. Nota: abbreviata può essere utilizzata per margin, padding, border, font, background e anche per i valori dei colore.
Codice Non Corretto

li{
	font-family:Arial, Helvetica, sans-serif;
	font-size: 1.2em;
	line-height: 1.4em;
	padding-top:5px;
	padding-bottom:10px;
	padding-left:5px;
}

Codice Consigliato

li{
	font: 1.2em/1.4em Arial, Helvetica, sans-serif;
	padding:5px 0 10px 5px;
}

6. Organizzare CSS Code

Organizzare il codice CSS in un certo ordine sarà più facile trovare gli elementi al momento opportuno e quindi ci farà risparmiare un sacco di tempo nella ricerca di una definizione specifica di uno stile.
Qui di seguito un esempio di oraganizzazione che si può utilizzare:

/*-------------------------
	CSS Reset
-------------------------*/

/*-------------------------
	Classi Generiche
-------------------------*/

/*-------------------------
	Stile Layout
-------------------------*/

/*-------------------------
	Stile Sezioni Specifiche
-------------------------*/

7. Rendere leggibili i CSS

Scrivere in modo leggibile i fogli di stile CSS renderà facile in seguito il ritrovamento e l’aggiornamento di una dichiarazione di stile. Tutti gli stili di un gruppo in un unico selettore con un rientro adeguato e in una riga; è possobile combianre insieme le 2 tecniche.

/*------------------------
	Ogni stile in una nuova linea
	---------------------*/
div{
	background-color:#fafafa;
	color:#333333;
	font: 1.2em/1.4em Arial, Helvetica, sans-serif;
	height:300px;
	margin:10px 5px;
	padding:5px 0 10px 5px;
	width:30%;
	z-index:10;
}

/*------------------------
	Tutti gli stili in una linea
	---------------------*/
div{ background-color:#3399cc; color:#666; font: 1.2em/1.4em Arial, Helvetica, sans-serif;  height:300px; margin:10px 5px; padding:5px 0 10px 5px; width:30%; z-index:10; }

8. Aggiungere i corretti commenti

I commenti possono essere utilizzati per separare diverse sezioni di codice CSS

/*--------------------
	Header
	-----------------*/
#header{ height:145px; position:relative; }
#header h1{ width:324px; margin:45px 0 0 20px; float:left;  height:72px;}

/*--------------------
	Contenuto
	-----------------*/
#contenuto { background:#fff; width:650px; float:left; min-height:600px; overflow:hidden;}
#contenuto .posts{ overflow:hidden; }
#contenuto .recent{ margin-bottom:20px; border-bottom:1px solid #f3f3f3; position:relative; overflow:hidden; }

/*--------------------
	Footer
	-----------------*/
#footer{ clear:both; padding:50px 5px 0; overflow:hidden;}
#footer h4{ color:#b99d7f; font-family:Arial, Helvetica, sans-serif; font-size:1.1em; }

9. Utilizzare fogli di stili esterni

È sempre bene durante la progettazione, la separazione del contenuto dalla presentazione. Realizzare tutto il codice di stile in un foglio esterno ed utilizzzare il
all’interno di una pagina web per far riferimento ai fogli di stile.
Codice Non Corretto

<style type="text/css" >
	#container{ .. }
	#sidebar{ .. }
</style>

OPPURE

<li style="font-family:Arial, helvetica, sans-serif; color:#666; " >

Codice Consigliato

<link rel="stylesheet" type="text/css" href="css/styles.css" />

10. Suddividi i CSS in più file

Se si sta lavorando su un progetto molto ampio con multipli moduli ed ognuno di essi ha un suo proprio insieme di stili e di aspetto, sarà meglio dividere il file CSS in più file in base al modulo a cui vengano applicati. È possibile separare i fogli di stile come, uno per il reset, uno per il layout, uno per le classi generiche e uno per il modulo di stili predefiniti. Questa tecnica ti permette di organizzare il codice facilmente in un ampio progetto; ma l’utilizzo di più fogli di stili CSS significa anche più richieste HTTP e di conseguenza tempi di caricamento più lenti, per questo è utile creare un CSS separato che importa gli altri file CSS.

@import "style/css/reset.css";
@import "style/css/typography.css";
@import "style/css/layout.css";

11. Comprimere il codice CSS

Una volta che si è pronti a distribuire il progetto di web design, comprimere il codice CSS utilizzando strumenti come i CSS Compressor per ridurre la dimensione del file e di migliorare il tempo di caricamento della pagina web.