WordPress: scrivere file CSS efficienti

Short link

I file CSS costituiscono un componente fondamentale di ogni tema di WordPress. Sfortunatamente non esistono regole specifiche per la loro scrittura, ad eccezione dei metadati posti all'inizio. Vediamo insieme come scrivere file gestibili e facilmente aggiornabili.

Dal generale al particolare

Un file CSS strutturato correttamente segue l'ordine del flusso della pagina e l'ordine della cascata CSS. Quindi si va da regole generali a regole particolari, ossia:

  1. Eventuali reset CSS.
  2. Elementi HTML generici (body, a ecc.).
  3. Sezioni del tema (header, contenuto principale, contenuto secondario, footer).
  4. Classi CSS (sezione condivisa).

Le classi CSS possono essere condivise da più elementi, quindi vanno in una sezione a parte. Ad esempio la classe alignleft può essere applicata sia ad un elemento img che ad altri elementi (come blockquote).

Commenti intelligenti

Solitamente si pensa che un commento CSS sia utile solo quando introduce una sezione del file CSS e la descrive. Questo è verissimo, ma non basta: un commento CSS dovrebbe essere concepito in modo da consentire una rapida ricerca testuale nell'editor da parte dello sviluppatore.

Si possono ad esempio usare dei flag:


/*= Elementi Generici */

/*= Header */

/*= Contenuto */

/*= Footer */

Il flag = mi permette una rapida ricerca nell'editor in modo tale da poter saltare da una sezione all'altra con rapidità. Nel caso di file CSS molto grandi questo si rivela utilissimo.

Sfruttare la cascata

I CSS si basano sul principio secondo cui regole generali vengono sovrascritte da regole più specifiche. Prendiamo il caso dei widget: solitamente si crea una classe widget per tutti e quindi delle classi specifiche per la sezione del tema in cui compariranno (ad esempio footer-widget).

Questa soluzione ha più senso a livello di scripting ma non a livello CSS in cui effettivamente si può solo sfruttare la cascata.


.widget {
	border-bottom: 1px solid #999; /* generica */
}

#sidebar .widget {
	border-bottom-color: #ddd;
}

#footer .widget {
	border-bottom-color: #fff;
}

La prima regola, generica, verrà sovrascritta dalle regole più specifiche che seguiranno. Come si può notare è il contesto della regola che fa la differenza, non l'aggiunta di un ulteriore classe CSS.