CSS  »  Articoli  »  Mondo CSS 

Saper scrivere codice CSS ben strutturato e organizzato richiede innanzitutto una buona esperienza sul campo. Infatti, solo grazie al lavoro e alla sperimentazione, risolvendo gli ostacoli che si ’incontrano durante lo sviluppo (compatibilità cross-browser docet), miglioreremo i nostri fogli di stile rendendoli più curati, eleganti e sopratutto funzionali.

La complessità del sito è la principale variabile da tenere in considerazione quando si scrive codice CSS. Un'analisi attenta del progetto ci consentirà di organizzare il nostro codice nel modo migliore e specifico per il progetto in questione. Teniamo conto che le caratteristiche e le funzionalità di un sito finiscono per evolvere e cambiare nel tempo, richiedendone magari di nuove e più complesse. La struttura e l'organizzazione del codice CSS devono pertanto potersi adattare in modo semplice e veloce a ogni tipo di modifica.

Suddividere per cominciare

Una buona abitudine è quella di suddividere il nostro codice in più fogli di stile. In questo modo potremmo gestire aggiornamenti o modifiche in poco tempo e con maggiore facilità. Utilizziamo:

• screen.css, per la visualizzazione del sito su un monitor;
• print.css, un css per la stampa;
• ie.css, un css separato per la compatibilità cross-browser su Internet Explorer;
• typography.css, un CSS dedicato alla tipografia (opzionale).

Leggibilità vs Funzionalità, due approcci differenti

Il primo approccio è quello improntato alla leggibilità. File CSS di grandi dimensioni sono difficili da gestire e solo una buona organizzazione ci permette di mantenere il codice leggibile e facilmente modificabile secondo nuove esigenze. Suddividiamo allora in aree il nostro file screen.css:

1) Stili Generici

reset: eliminiamo le impostazioni di default dei browser

body: regole generali per l'elemento body

links: stili per i link del sito

intestazione: stili per i titoli h1, h2, h3, h4, h5, h6

classi custom: classi aggiuntive da poter utilizzare nel sito (es. le classi per l'allineamento del testo e delle immagini)

2) Struttura della Pagina

In questa parte definiamo gli stili per gli elementi strutturali del layout uguali in tutte le pagine del sito. Ad esempio:

header

main

sidebar

navigation

footer

3) Componenti

Sono gli stili per ciascun elemento della pagina.

Altri articoli

Altre guide

Altre newsletter