Checklist CSS

1- Nella compilazione del CSS, procedere dall'alto verso il basso del layout e dividere con i commenti le sezioni del layout.

I commenti sono una buona idea per rendere leggibile il codice.

/****** Generic classes ***/

 (body, a, p, h1, etc.)

/****** Main content ****/

.main-content

/****** Footer *********/
.footer


2- Accorpare il più possibile le dichiarazioni assieme ( sfruttando le regole comuni e le ereditarietà ) ed evitare i selettori troppo lunghi.

h1 , h2 , h3 { font-family : Tahoma , color : # 333 }


3- Evitare quindi se possibile, la sovrascrittura delle regole css e gli !important.
4- Evitare il più possibile i margini negativi.
5- Evitare se possibile regole css3 se non necessarie.
6- Evitare se non necessario di utilizzare javascript per aggiungere regole di stile.
7- I fogli di stile importati e i font face, devono stare in cima.
8- Nella pagina, i CSS vengono caricati in cima, mentre i Javascript in fondo.
9- Crea prima la struttura HTML
Molti progettisti compilano il loro CSS e allo stesso l'HTML .
Sembra logico per creare entrambi allo stesso tempo, ma in realtà si risparmia ancora più tempo se si crea l'intero mockup HTML prima.
Il ragionamento dietro questo metodo è che si conoscono tutti gli elementi del layout del sito, ma non so che CSS è necessario con il layout.
Creare il layout HTML prima consente di visualizzare l'intera pagina nel suo insieme e ti permette di pensare al CSS in modo più "astratto".
10- Il CSS dovrebbe essere "semantico" ossia, le classi dovrebbero "parlare" a proposito del loro contenuto.
Ricordate - HTML è per il markup e il contenuto. CSS è per la presentazione.
Se si deve tornare al vostro HTML per modificare la presentazione (o styling) della pagina, c'è qualcosa che non va.
11-Usare il giusto DOCTYPE ( http://www.alistapart.com/articles/doctype/ )
12-Usare la sintassi breve per scrivere le regole,

.classe {
    margin-left:    5px;
    margin-right:   7px;
    margin-top: 8px;
}

può essere scritta in forma breve:    

.classe {
    margin: 8px 7px 0px 5px; // top, right, bottom, left
}

13-Utilizzare in modo opportuno gli elementi INLINE e BLOCK, senza riscritture:
Elementi block sono elementi che tendono a occupare tutta la larghezza dello spazio disponibile.
div, h1 -> h6, p, ul, li, table, blockquote, pre, form
Gli elementi inline prendono solo lo spazio di cui hanno bisogno , e non forzano una nuova linea dopo che sono utilizzati.
Questi elementi ad esempio possono essere inline o block:
span, a, strong, em, img, br, input, abbr, acronym
14- Usare un compressore CSS. Questo vale anche per i JS.Tendenzialmente si dovrebbe avere un unico file html, un unico file css e un unico file js ( vedi AngularJs )
15- Avere degli strumenti comodi per poter intervenire sulla pagina senza dover riscrivere ogni volta la regola:

.left { float : left}
.right { float : right }
< div id = classe " box left" > ... < / div >

In questo modo non c'è bisogno di aggiungere costantemente " float : left" a tutti gli elementi che devono essere flottati a sinistra.
16- Utilizzare " Margin : 0 auto"  per centrare gli elementi

margin-left: 0 auto;
margin-right: 0 auto;

Questo funziona solo se il contanitore ha una sua larghezza specifica ed è di tipo block.
In caso di centratura verticale, se è un immagine,

vertical-align: middle;

17-Cercare di mantenere stringati i selettori:

body #container .classe ul li {....}

E' semplicemente dichiarabile con:

.classe li {...}

18- Se possibile, meglio dividere il CSS in diversi file: in ogni caso verrebbero accorpati in un unico dal compressore
Ancora meglio sarebbe caricare per ogni modulo un proprio CSS.