Creare un CSS di base

Ogni progetto ha una sua storia e un suo sviluppo, ma per quanto riguarda i
CSS, c'è un piccolo sottoinsieme che spesso ci ritroviamo ad utilizzare e copia-incollare
di progetto in progetto, una sorta di foglio di stile di base.

Poter disporre di un CSS di base è fondamentale per diversi motivi:

• Ci fa risparmiare tempo di codifica, per lo meno per i tratti comuni a tutti i siti
• Ci libera dall'imbarazzo della pagina bianca in cui spesso si scontrano designer e sviluppatori
• Ci garantisce una buona consistenza stilistica
• Ci offre una solida base tipografica per le nostre pagine web

Si tratta ovviamente di uno di quelli strumenti di natura molto personale per ogni web designer,
e potrà variare di progetto in progetto, ma prendere confidenza con il suo processo di sviluppo non
può far altro che semplificare il lavoro iniziale, di qualsiasi natura esso sia.

In questo articolo proseguiremo il percorso iniziato con Armonizzare lo spazio bianco
per definire quali sono gli elementi comuni per un CSS di base, focalizzando l'attenzione sul
processo della loro definizione. Cominciamo subito.

Gli elementi essenziali

Per poter definire al meglio il nostro CSS di base il punto di partenza è porci
una semplice domanda, ovvero: Quali sono gli elementi comuni ad ogni pagina web? Quali
le proprietà e dichiarazioni così ricorrenti da essere sempre presenti?
La risposta è piuttosto semplice. Ogni progetto necessita soprattutto di una solida
base tipografica, ovvero:

• Tipografia: testo principale della pagina e titoli
• Line-height sugli elementi principali
• Spazio bianco, ovvero margini e padding

Siamo pronti per procedere con lo sviluppo del nostro CSS di base, il cui effetto
è consultabile nell'esempio che accompagna l'articolo.

Dimensionare il font di base

Sviluppando una pagina web, definire la tipografia di base è una delle prime cose da fare,
se non la prima. Ora non vorrei entrare nel merito del dimensionamento fisso (ovvero in
pixel) contro relativo (ovvero percentuali e/o em),
una delle questioni senza dubbio più discusse nel web design. Personalmente, propendo per il
dimensionamento relativo per un semplice fatto: è una scelta più attenta all'utente piuttosto
che al design.

Sostanzialmente ci sono due misure del font-size di base ormai universalmente
riconosciute dai webdesigner. La prima è 76%, che risulta da uno studio
di Owen Briggs: a questa misura corrisponde un font di circa 12px, con il testo medio impostato dal browser.
È possibile consultare la resa di tale valore su questa pagina di esempio.

L'alternativa è il testo dimensionato a una misura pari alle dimensioni del font-size del
browser, così da avere un font size all'incirca di 16px con testo medio impostato. Per far ciò,
è importante specificare il valore del font-size pari a 100.01%,
come si è fatto nell'esempio.

Il motivo di tale valore anche in questo caso è storico, ed è documentato in
CSS: getting into good coding habits,
di cui vale la pena riportare un passaggio tradotto:

Questo strano valore (100.01%) per il font-size
compensa diversi bug dei browser. Primo, impostare una misura del
font-size in percentuale (invece che in em) elimina un problema
di IE con il ridimensionamento dei font. Inoltre alcune versioni
di Opera renderanno un font size del 100% troppo piccolo se confrontato
con gli altri browser. Safari, d'altra parte, ha un problema con il
font-size del 101%. Il miglior suggerimento attuale di usare 100.01%
per questa proprietà.

Un altro valore piuttosto diffuso per il font-size del body è 62.5%,
a cui corrisponde circa un font di 10px impostato con carattere medio sul browser. La mia
opinione è che si tratta di un font davvero troppo piccolo, e può andar bene solo per alcune
sezioni di pagina ma non come misura di default di un sito intero.

Definire la grandezza dei titoli

Una volta stabilito il font-size del body procediamo a definire
i titoli: la grandezza con cui vengono resi di default rispetto al corpo del testo
varia da brower a browser, ed è quindi importante quindi livellare le differenze di
resa. Ecco le regole CSS dell'esempio finora:

C'è da evidenziare che l'em relativo al font-size esprime un fattore
moltiplicativo: per esempio per gli h1 un font-size di 2.4em
indica un font-size grande 2.4 volte quello del font-size del suo contenitore. Salvo
ridefinizioni di testo sui div di pagina, i titoli h1 saranno
quindi grandi 2.4 volte il font-size del body. Stesso discorso per i titoli di livello
inferiore, che si sono definiti in modo da avere una diminuzione progressiva ed esprimere
così visivamente la loro "gerarchia" all'interno della pagina.

Da notare infine che le regole per i titoli appena viste
possono andar bene anche nel caso in cui si decidesse di impostare una misura del font-size
del body in pixel anzichè relativa.

Il line-height

Altro aspetto fondamentale per una pagina web è il line-height,
di cui abbiamo parlato non molto tempo fa nell'articolo
Capire e usare
il line-height in cui si sono affrontati aspetti teorici e pratici di questa proprietà.

Da una parte può essere pratico e veloce specificare il line-height
combinandolo con la dichiarazione del font sul body in questo modo:

Ma è pur vero che quello che vorremmo è che la dichiarazione non avesse
effetto su tutti gli elementi di pagina. Per quanto riguarda i titoli
ad esempio, questi sono costituiti il più delle volte da una sola linea di testo
oppure in caso contrario un line-height pari ad un valore accettabile su sezioni
di testo normali (come 1.5 nel codice sopra) si rivela poco adeguato.

Il line-height interviene di riflesso sull'altezza degli elementi di pagina,
e per i titoli è in grado quindi di generare spazi verticali aggiuntivi il più delle
volte indesiderati.

Le soluzioni a questo punto sono due. La prima è definire il line-height per
tutta la pagina, per poi specificare un line-height inferiore per i titoli
(per esempio 1.2):

L'alternativa è specificare il line-height solo per
gli elementi principali della pagina, come ho fatto nell'esempio:

Il CSS di base completo

La costruzione del nostro CSS di base dell'esempio
sta volgendo al termine. Non ci resta a questo punto che controllare margini e padding
degli elementi principali di pagina: per questa parte rimando all'articolo
Armonizzare lo
spazio bianco. Vediamo quindi il CSS dell'esempio
per intero:

Conclusioni

In questo articolo abbiamo visto brevemente la realizzazione di un CSS
di base, che può costutuire un valido starter kit per i vostri progetti.
Come ho detto in apertura, racchiude aspetti da considerare in ogni occasione,
ma la sua realizzazione può risultare molto soggettiva e variare di caso in caso.
È comunque importante capire i meccanismi alla base del suo sviluppo e in particolare
i concetti essenziali tali da poter disporre di un solido punto di partenza.

Gli esempi dell'articolo sono disponibili per il download. Alla prossima.