Questa è la traduzione dell'articolo Faster Development with CSS Constants di Rachel Andrew pubblicato originariamente su 24 Ways il 2 dicembre 2006.
Chiunque abbia un minimo di dimestichezza con un linguaggio di programmazione si imbatte prima o poi nel concetto di costante. Si tratta di un valore fisso che può essere usato e riusato all'interno del nostro codice. Per esempio, in uno script PHP, potrei avere una costante che corrisponde ad un indirizzo e-mail verso cui vengono indirizzate tutte le e-mail generate dalla mia applicazione:
$adminEmail = 'info@example.com';
Potrei poi usare $adminEmail nel mio script quando mi serve per inviare una e-mail a quell'indirizzo. Il vantaggio di questa semplice tecnica è che se un giorno il cliente decide di volere i messaggi su un altro indirizzo, avremo solo bisogno di modificare il valore in un unico posto, quello in cui abbiamo definito inizialmente la costante.
Purtroppo i CSS non supportano le costanti. Sarebbe davvero utile essere in grado di definire certi valori all'inizio e poi poterli riusare nel resto del nostro foglio di stile. Nell'articolo spiegherò come implementare dei semplici metodi per superare questa mancanza, soffermandomi su ciascuno con dei brevi commenti.
Quali opzioni abbiamo?
Un modo per superare la mancanza di costanti nei CSS consiste per esempio nel creare alcune definizioni all'inizio di un foglio di stile, racchiudendole tra commenti, per definire delle 'costanti'. Un uso comune potrebbe essere quello di creare una sorta di glossario dei colori. Significa che abbiamo a disposizione una raccolta sintetica e rapida di tutti i colori usati sul sito per evitare errori nel loro uso. Inoltre, è un modo semplice per effettuare rapidamente delle modifiche nel caso sia necessario cambiare questo o quel colore: basterà infatti partire dai valori presenti nella lista per poi fare un semplice trova e sostituisci.
Nell'esempio qui sotto, se decido di cambiare un grigio leggero nel valore #999999, tutto ciò che devo fare è cercare e sostituire il valore #666666 con #999999:
/*
Dark grey (text): #333333
Dark Blue (headings, links) #000066
Mid Blue (header) #333399
Light blue (top navigation) #CCCCFF
Mid grey: #666666
*/
È un metodo estremamente semplice, ma se usato consistentemente nello sviluppo di un CSS può rendere le modifiche più semplici e aiuta a mantenere una certa consistenza nello schema dei colori del sito.
Ho visto usato questo metodo da molti designer, ma Garret Dimon ne documenta davvero bene l'uso, con altre idee che emergono nei commenti.
Lavorare sul lato server
Per ottenere però qualcosa che si avvicini al meglio alle vere costanti, dovremo usare qualcosa di diverso dai semplici CSS per processare il file prima che sia inviato al browser. Possiamo usare qualunque linguaggio di scripting - PHP, ASP, ColdFusion - per parsare un file CSS in cui abbiamo inserito delle costanti. Dunque, in un'ipotetica sezione delle costanti definita nel foglio di stile, avremo:
$darkgrey = '#333333';
$darkblue = '#000066';
Il resto del CSS è del tutto normale, ma quando si tratti usare il valore della costante che intendiamo usare, faremo ricorso semplicemente al nome della costante invece di aggiungere il colore:
p {
color: $darkgrey;
}
Lo script lato server potrebbe quindi parsare il file CSS, rimpiazzare i nomi delle costanti con i valori delle stesse e servire al browser un CSS valido. Christian Heilmann ha creato un metodo simile per il PHP, ma la tecnica può essere adattata a qualunque linguaggio disponibile sul server.
Shaun Inman ha elaborato un metodo alternativo, metodo che rimuove la necessità di legarsi ad uno script PHP e consente anche l'aggiunta di costanti usando la sintassi delle at-rules. Questo metodo usa sempre PHP e richiede la creazione e la modifica sul server di un file .htaccess.
Un ulteriore metodo consiste nel generare file CSS statici sia usando uno script in locale - se le costanti servono solo a velocizzare lo sviluppo - sia integrando il tutto nel codice dell'applicazione. Conservare un foglio di stile template con nomi di costanti al posto dei valori che vogliamo aggiornare significa che uno script può semplicemente aprire il template, sostituire le variabili e salvare il risultato come un nuovo foglio di stile.
Se le costanti nei CSS possono essere un valido aiuto per gli sviluppatori, possono anche essere usate per aggiungere nuove funzionalità alle nostre applicazioni. Come nell'esempio dell'indirizzo e-mail visto in precedenza, usando una combinazione di CSS e script lato server potremmo per esempio consentire all'amministratore di un sito di selezionare i colori per un nuovo tema su un sito gestito attraverso un CMS. Usando le costanti potremmo dare l'opzione di modificare solo certe parti del CSS senza bisogno di uploadare un nuovo file.
È probabile che nel prossimo futuro non troveremo le costanti per i CSS sotto l'albero di Natale, per cui i metodi visti sono delle possibilità da tenere presenti per una migliore gestione dei nostri fogli di stile.
Rachel Andrew è Managing Director di una società di consulenza del Regno Unito, edgeofmyseat.com.È l'autrice di HTML Utopia: Designing Without Tables Using CSS e CSS Anthology: 101 Essential Tips, Tricks and Hacks, entrambi pubblicati su SitePoint. Presso il Web Standards Project Rachel si occupa della Dreamweaver Task Force, oltre che di altre cose secondo la necessità.
