Accorgimenti sintattici per un buon funzionamento dei CSS

Per un corretto funzionamento delle dichiarazioni è necessario fare attenzione ad alcune accortezze di base onde evitare che la regola applicata possa venire ignorata con conseguenze più o meno evidenti sul risultato finale a livello visivo.

Il valore della proprietà nelle dichiarazioni non deve mai essere contenuto all'interno di apici o virgolette ad eccezione di stringhe di testo (per le proprietà content e quotes), nei nomi dei font costituiti da più parole come nel caso dell'articolo precedente font-family: "Times New Roman" e, anche se il loro utilizzo è facoltativo, negli URL che puntano a documenti (URI) come nel caso della proprietà background-image.

E' necessario fare attenzione ad un altro dettaglio che può trarre in inganno ovvero, la questione degli spazi.
Gli spazi possono essere presenti all'interno delle dichiarazioni e pertanto può essere inserito, prima (anche se non ne ha molto senso) e dopo il separatore della proprietà e del suo valore (:) e tra una dichiarazione e l'altra ma non può trovarsi (altrimenti la regola non viene considerata o dà un riscontro inaspettato) tra il valore di una misura e la sua unità, sia essa px, em, % o altro:

/* Valore assegnato correttamente */
#container {padding:10px;}

/* Valore assegnato erroneamente, il margine di riempimento di 10px non sarà applicato */
#container {padding:10 px;}

E' possibile assegnare ad una proprietà, qualora servisse, un valore numerico decimale. In questo caso il simbolo da utilizzare è il punto (.) e non la virgola (,).

Come si vede dal primo esempio di codice per i tag h1 e h2, i selettori che hanno proprietà identiche possono essere raggruppati, separandoli da una virgola, minimizzando così il codice del foglio di stile con un guadagno in leggerezza che si ripercuote positivamente nell'apertura delle pagina web che lo ospita.

Nel caso ci siano più di una dichiarazione per un determinato selettore queste devono essere intervallate da un punto e virgola (;), non è obbligatorio (vale anche perdichiarazioni uniche) inserire il punto e virgola dopo l'ultima dichiarazione, cioè quella seguita dalla chiusura delle regola del selettore ossia, la parentesi graffa.

Dopo la chiusura della parentesi graffa, che definisce appunto il termine di un determinato gruppo di dichiarazioni per quel particolare selettore, è possibile scrivere immediatamente la regola successiva senza necessariamente aver bisogno di un spazio o di un ritorno a capo.
Consiglio tuttavia di non adottare direttamente questa pratica per garantire una maggiore leggibilità del codice soprattutto in fase di sviluppo, dopodichè per la pubblicazione ci sono una serie di tool gratuiti in rete ai quali dare in pasto il nostro foglio di stile e scegliere i parametri di compressione per minimizzarlo. La finalità di questa prassi garantisce un peso minore delle pagine e pertanto una loro maggiore velocità di apertura.
Un tool online gratuito che svolge bene il suo lavoro potrebbe essere CSS Compressor, dove oltre all'output restituisce anche la percentuale di ottimizzazione.

Molto importante è la comprensione dei conflitti tra gli stili che può essere un bel grattacapo quando si tenta di apportare modifiche al CSS senza giungere al risultato sperato. Per capire quale possa essere la fonte del problema è necessario fare chiarezza principalmente sul fatto che non tutte le regole possono essere applicate a tutti gli elementi.

Le regole del CSS vengono automaticamente applicate con un sistema di ereditarietà ossia, una regola data ad un elemento (ad esempio la dimensione del carattere) vale per tutti i suoi discendenti se non diversamente indicato con regole successive.

Il flusso di lettura dei CSS vede prevalere su tutti i tipi di inserimento delle regole gli stili in linea, cioè quelli inseriti direttamente nel codice all'interno del tag a cui si intende applicare la regola; a sua volta i codici incorporati nella pagina (quelli solitamanete inseriti nel tag head) hanno maggiore rilevanza rispetto a quelli linkati in un file esterno. Ecco ancora una volta che il consiglio di utilizzare un file unico inserito con elemento link può essere di aiuto per una maggiore gestione del codice e di conseguenza del risultato visivo delle pagine.

In ultima analisi, per interrompere in tutti i casi il flusso per un determinato selettore basta aggiungere al valore della dichiarazione il termine !important (punto esclamativo seguito subito dalla parola important) e di conseguenza quella proprietà per quel determinato selettore prevarrà su tutte le altre.