Ho letto un’articolo molto interessante su Noupe che elenca 15 punti da seguire per scrivere un buon CSS.

Le pratiche per scrivere buon codice non sono mai abbastanza:

1. Usare un CSS di reset per partire dalla stessa base con tutti i browser
2. Usare le dichiarazioni nella loro forma compatta (es: padding: 4px 3px 10px 4px; )
3. Usa i commenti per spiegare cosa stai facendo
4. Aggiungi una leggenda colori (es:  /* light blue: #4595be */ )
5. Considera bene a quale elemento sono relativi gli elementi che dichiari con il posizionamento assoluto
6. Evita gli hack del CSS e prova invece a creare diversi fogli di stile in base al browser se è necessario
7. Usa maggiormente la proprietà margin nel definire il layout. La proprietà padding crea maggiori problemi nella resa crossborwser
8. Aggiungi un elemento contenitore con overflow: hidden agli elementi che fanno uso del float in modo da pulire la situazione (questo devo provarlo).
9. Aggiungi display: inline agli elementi float per risolvere il problema dei doppi margini su IE6
10. Comincia ad usare con maggior convinzione gli sprites (lo so dovrei farlo!)
11. Organizza in modo ordinato file e cartelle per css, scripts, immagini etc…
12. Indenta gli stili (qui non sono d’accordo!)
13. Per i font usa misure assolute in pixel in luogo di quelle relative (em)
14. Limita l’uso delle pseudoclassi perché IE6 le supporta solo parzialmente
15. Evita i problemi con i selettori. Essi rispettano le gerarchie, quindi uno stile applicato viene ereditato

Questo è solo l’elenco. Se vuoi leggere in dettaglio tutti i punti leggi l’articolo originale

Ti ho già parlato di come scrivere meglio i CSS e anche della lora formattazione. Oggi ti presento un ottimo tool completamente gratuito che ti permette di ottimizzare ulteriormente il tuo codice.

Styleneat è un web app che permette di ottimizzare i fogli di stile.  Farla funzionare è facilissimo. Puoi inserire il codice nella form presente nell’homepage  o fare l’upload del file css dal secondo tab. Il risultato è sotto i tuoi occhi:

In un attimo il tuo foglio sarà indentato e ottimizzato pronto per essere pubblicato. Molto comoda è la funzione che permette di ordinare alfabeticamente le classi ma anche quella che decide se la formattazione deve essere mono o multiriga.

Consigliatissimo!

Prendo spunto da questo ottimo articolo di NetTuts per darti qualche altro consiglio su come impostare al meglio i CSS.

Nel primo post spiegavo qual’era la formattazione migliore per un CSS per quanto concerne la mia esperienza. In questo nuovo post oltre ad aggiungere alcune dimenticanze segnalo qualche buon consiglio per ottimizzare il flusso di lavoro

continua a leggere…

I fogli di stile contengono le regole che definiscono la rappresentazione dei documenti html e xhtml e sono contenute nelle direttive del W3C.

All’interno di un foglio di stile le regole CSS sono così strutturate:

selettore {
proprietà1 : valore1;
proprietà2 : valore2, valore3;
}

Vediamo come è possibile organizzare al meglio un foglio di stile.

continua a leggere…