Deswign

Questo è il titolo di un interessante articolo di Jina Bolton nel quale ci consiglia 10 trucchi per scrivere css : “diventare esperti di css non vuol dire solo imparare a memoria i selettori, ma anche sapere realizzare fogli di stile efficenti”. Vi riporto un riassunto (cercando di tradurre al meglio) :

1. Lasciare il codice css fuori dal markup del sito, è sicuramente una regola banale ma anche la più importante e soprattutto non viene ancora applicata. Immaginate di dover realizzare un sito di grandi dimensioni, quando dovrete gestire una piccola modifica preferite aggiungere il codice inline o inserirlo nel foglio di stile importato? Se un giorno (e capiterà di sicuro) avrete voglia di ridisegnare completamente il sito mantendo inalterato il contenuto, il tempo che impiegherete sarà minimo se il codice css è stato aggiunto nei fogli di stile, ma se avete preferito inserirlo inline dovrete ricordavi tutte le parti di markup nel quale è presente. Fate attenzione nell’ importare troppi fogli di stile, altrimenti sarà difficile aggiungere contenuti e correggere errori (inoltre avrete un eccesso di richieste http e IE6 consente di importare fino a 32 fogli);
2. la semantica è il tuo miglior amico, scegliamo con criterio il nome delle nostre classi e degli id: in base alla posizione, al colore o alla funzione delle stesse, questo ci consentirà di avere una gestione migliore del nostro foglio specialmente quando dovremmo ridisegnare completamente il sito (come accennato in precedenza), es:

   .product-description { color: #369; }
   

   .left-blue { color: #369; }
   

3. sfruttiamo i commenti, per inserire delle note

   /* Turn off borders for linked images */
   

   la firma e la data di aggiornamento

   /* Sushimonster Typography Style   Updated: Thu 10.18.07 @ 5:15 p.mAuthor:     Jina Bolton----------------------------------------------------*/
   

   per organizzare il codice dividendolo in base alla sezione corrispondente di markup

   /* HEADER   ----------------------------------------------------*/
   

   per inserire dei riferimenti

   /* COLORS  Body Background:       #2F2C22Main Text:             #B3A576Links:                 #9C6D25Dark Brown Border:     #222019
   
   Green Headline:        #958944
   
   */
   
   /* GENERIC
   
   HEADER
   
   SIDEBAR
   
   FORMS
   
   TABLES
   
   FOOTER
   
   */
   

4. sapere quando usare commenti condizionali o hacks, ci sono molti articoli sull’ argomento e sono daccordo che l’ uso dei commenti condizionali può essere una soluzione migliore degli hacks, ma ultimamente mi sto accorgendo che spesso non è così, pensate alla fase di debug del css: per modificare una proprietà presente anche nei fogli per IE dovreste aprire e lavorare su molti file insieme; inoltre lasciate sempre un commento nel fogli di stile principale in corrispondenza di una regola presente anche su un foglio esterno importato solo per IE, infine se preferite usare gli hacks ricordatevi che potrebbero non funzionare più con una versione aggiornata del browser,
5. organizzate selettori e dichiarazioni, preferisco gestire i miei selettori in questo modo:
   • reset styles
   • typography styles
   • layout styles (header, content, footer, etc.)
   • module or widget styles
   • etc.

   per le dichiarazioni:

   • positioning (with coordinates) styles
   • float/clear styles
   • display/visibility styles
   • spacing (margin, padding, border) styles
   • dimensions (width, height) styles
   • typography-related (line-height, color, etc.) styles
   • miscellaneous (list-style, cursors, etc.) styles

   alcuni preferiscono anche ordinarle in modo alfabetico,

6. creati un framework, se lavori con i css farai spesso le stesse operazioni quindi è una buona idea farti una libreria di stili, tipicamente comprende: screen.css, il foglio di sitle per importato in modalità screen che può includere altri file quali reset.css (per resettare tutti gli stili di default dei browser e aiutarti nel renderlo cross-browser); typography.css usato per gestiere la tipografia (font,spazi,colori); grid.css per gestire una struttura di layout; print.css usato per gestire il tuo sito quando verrà stampato,
7. Misura leggibilità e organizzazione, il modo di scrivere codice varia da sviluppatore a sviluppatore: alcuni lo formattano dando molta importanza alla leggibilità e poi lo comprimono (levando commenti,tabs,accapo,etc.), una tecnica che consiglio. Ma se non puoi seguire questi step cerca sempre di trovare un equilibrio tra leggibilità e organizzazione ( puoi seguire questi consigli)
8. Specializza il tuo editor di testo, scegli con cura lo strumento del mestiere, ce ne sono tanti come TextMate, Coda, BB Edit, TextPad, DreamWeaver, etc.. non ve ne voglio consigliare uno ma quando lo avete scelto informatevi su ogni sua funzione e scorciatoia da tastiera,
9. Usare il vcs, utile allo sviluppatore specialmente quando lavora in un team: consente di salvare tutte le versioni di un file, consente a più persone di lavorare su stessi file evitando dei conflitti,
10. Creare e mantenere una guida dello stile, può essere utile creare una miniguida dove elencare i vari layout e le associazioni tra markup e stile.

Make the CSS intelligent and plan for the future