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

code1

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.

Formattazione

Come per la programmazione, non esiste un modo univoco per scrivere il codice. Il consiglio che posso darti è quello di renderlo comunque chiaro per far si che in un secondo momento eventuali modifiche risultino più agevoli.

Per esempio scrivere:

.classe{
width:100%;
margin:0 5px;
font-size:1.50em;
}

è equivalente a:

.classe{width:100%; margin:0 5px; font-size:1.50em;}

Allora quale scegliere?

Prova a pensare di dover modificare un foglio di stile con un centinaio di classi (il numero potrebbe essere di molto più grande per siti che ne fanno largo uso). Trovare la classe non dovrebbe essere un problema ma avere subito idea di quali sono le proprietà che la compongono, nel secondo caso potrebbe risultare decisamente ostico.

Per questo e per altri motivi ti consiglio di creare un foglio di stile basandoti sul primo esempio o comunque su un suo derivato (per esempio con una differente indentazione) .

Unire le proprietà

Le specifiche CSS permettono di “accorpare” sotto un’unica proprietà una serie di proprietà derivate.

Il caso più comune è quello legato al testo.  Dichiarare il testo di una classe in questo modo:

.classe{
font-size: 15px;
font-family:verdana,arial;
font-weight:bold;
}

comporta il medesimo risultato di:

.classe{ font: 15px verdana,arial bold; }

in questo caso non me la sento di dare una preferenza. Diciamo che la scelta va a gusto.

Caso diverso può essere per le proprietà padding e margin dove:

.classe{
margin-top:25px;
margin-right:5px;
margin-bottom:30px;
margin-left:10px;
}

può essere sostituito da un più efficace:

.classe{ margin: 25px 5px 30px 10px;}

In pratica si possono elencare i valori partendo dall’alto continuando in senso orario.

Ulteriore alternativa può essere la seguente:

.classe{ margin: 25px 10px;}

dove indicando solamente due valori si intende top e bottom per il primo e left e right per il secondo valore.

Compressione dei CSS

Esistono addirittura dei software (anche online) il cui scopo è quello di compattare i css eliminando spazi e “a capo” per alleggerire il file o per renderlo meno “clonabile”.

A mio avviso questa tecnica è assolutamente da non utilizzare a meno che non si conservino in locale delle copie del file indentato. Una modifica dell’ultima ora potrebbe portarvi via molto più tempo di quanto non vi abbia fatto risparmiare l’ottimizzazione della dimensione del file.

Se per te il risparmio di Kb è fondamentale ma non vuoi rendere illeggibile il css ti consiglio di provare questo:

PHP CSS Compressor

Si tratta di uno script da inserire nel vostro file il quale a fronte di una richiesta (quando qualcuno visita il tuo sito scarica il file .css) comprime in modo dinamico (in tempo reale) il file. Fisicamente il file rimane quello originale e quindi può essere modificato agevolmente.

Conclusioni

Esistono moltissimi altri trucchetti da seguire che per questioni di tempo non posso trattare. Per approfondimenti sui CSS vi rimando alle ottime guide di html.it:

Il consiglio è comunque quello di rendere il tutto il più chiaro possibile anche a costo di scrivere qualche riga di codice in più.

Tu come formatti i tuoi CSS?

Ecco una lista di altre risorse che potrebbero interessarti:

  1. Reset di un foglio di stile CSS
  2. Organizza online il tuo foglio di stile CSS
  3. 5 modi per scrivere meglio i CSS
  4. CSS – Mostrare del testo associato ad una immagine
  5. 15 Buone abitudini da seguire con i CSS