Avevo intenzione di scrivere questo articolo solo dopo aver sviluppato il mio progetto di un tema di Wordpress per sviluppatori, ma poi mi sono accorto che ad ogni nuovo tema adattato per i clienti mi ritrovavo sempre di fronte ai soliti CSS mal scritti e quindi eccoci a fare il punto della situazione sul discorso CSS e temi di Wordpress. In due parole, il novanta per cento dei fogli di stile dei temi che ho visto sinora sono la dimostrazione di come l'ignoranza delle più comuni buone pratiche nella scrittura dei CSS porti a problemi di adattabilità, scalabilità e performance. Vediamo insieme qualcuno di questi errori.
Regole @import
Le regole @import sono da evitare per vari motivi. Primo, moltiplicano le richieste GET nei browser e quindi penalizzano la performance. Secondo, impediscono di modificare il CSS direttamente nell'editor di Wordpress perchè molto spesso i file importati risiedono fuori dal percorso diretto della directory del tema. È meglio avere un solo grande file, ma editabile e scaricabile con un'unica richiesta GET, che quattro o cinque file con quattro o cinque richieste GET e non direttamente modificabili nell'editor.
L'unica eccezione, a mio avviso, è rappresentata dagli stili dati per effettuare il reset degli stili predefiniti del browser. Stranamente, pochi usano questo accorgimento.
Reset CSS
Ho l'impressione che gli autori di temi usino gli stili di reset semplicemente copiandoli e incollandoli dal web senza sapere effettivamente come funzionino. Esistono due tipi di reset: globale e parziale. Il primo è massivo, nel senso che resetta gli stili di tutti gli elementi HTML, mentre il secondo è selettivo, ossia va a selezionare solo quegli elementi che hanno effettivamente bisogno del reset.
Un giorno vi telefona un cliente dicendovi che il sito non funziona bene. Lui (o lei) ha copiato del testo preformattato o marcato, lo ha incollato nell'editor e ha pubblicato la pagina. Solo che, ci dice, il grassetto e il corsivo sono spariti. Cosa è successo? Il reset CSS globale ha eliminato anche gli stili di elementi come b, i, sup, sub e small, e per questo il testo del cliente appare come testo semplice.
Morale: meglio un reset parziale e selettivo che un reset globale e massivo, perchè non tutti gli stili predefiniti dei browser sono inutili.
Commenti CSS
I commenti CSS dovrebbero facilitare la consultazione del file, non solo aggiungendo metainformazioni, ma anche fornendo dei riferimenti testuali per la ricerca nel file. I riferimenti più utili sono i flag CSS:
/*= Main */
/*== Page */
I segni di uguale (a volte seguiti da una lettera) servono per effettuare le ricerche testuali con un editor. Un solo segno indica una macrosezione, mentre due o più segni indicano delle sottosezioni. Quindi potete semplicemente cercare le n-ricorrenze del segno = o dei segni ==. Questo semplifica di molto la consultazione e l'editing del file.