Librerie JavaScript come
Less o
Sass consentono di strutturare la costruzione di un foglio di stile CSS utilizzando
variabili, nidificando i selettori, e con altri costrutti che rendono il codice più leggibile e facilmente modificabile. In
un post del suo blog,
Tab Atkins, membro del
CSS Working group e del team di sviluppo di
Chrome, presenta alcune innovazioni sperimentali che stanno per essere proposte al
W3C, ispirate proprio dalle potenzialità delle summenzionate librerie.
L'
introduzione delle variabili permetterebbe di definire uno schema di colori per il sito, o delle dimensioni standard per certi elementi, e di modificarle in modo semplice. La sintassi proposta è :
@var color $colore-sfondo #c06;
A differenza di quanto accade per
Less e
Sass, le variabili andrebbero quindi
tipizzate (qui con la keyword
color), con l'intento di costruire un
CSS Object Module più coerente di quello attuale.
Senza mezzi termini Atkins afferma che l'attuale
CSSOM fa schifo, dato che tutti i valori vengono gestiti attraverso stringhe come "500px", "1.5em". Inserendo direttamente i valori tramite JavaScript potremmo invece avere una sintassi molto più logica; per attribuire un valore:
elemento.style.values.backgroundColor.lightness = 10;
per modificare un valore:
elemento.style.values.width.px += 100;
per ricavare i valori degli elementi:
var larghezzaInEm = el.style.values.borderWidth.em;
Vengono inoltre proposti altri strumenti per facilitare questa sorta di "programmazione" dei fogli di stile, come ad esempio i
Mixin, che raggruppano un insieme di dichiarazioni.
@mixin errore { background: #fdd;
color: red;
font-weight: bold;
}
div.errore { border: thick solid red;
padding: .5em;
@mix errore;
}
In più,
nidificare le dichiarazioni, coerentemente col
DOM, ridurrebbe l'usuale prolissità del codice CSS:
#main > header > h1 { font-size: 2em;
background: blue;
color: white;
& > a { color: #ddf;
&:visited { color: #fdf;
}
}
}
Infine i
moduli, ispirati a
Python, evitano i problemi derivanti da variabili globali, che potrebbero essere inserite tramite widget di terze parti. Si tratta in pratica di creare
namespace con variabili e
mixin:
@module widget { @var $colore red;
@mixin titolo { font-weight: bold;}}
elemento1 { color: $widget.colore;
@mix widget.titolo;
}
elemento2 { @use widget;
color: $colore;
@mix titolo;
}
Queste proposte, con la loro
sintassi ispirata alla programmazione ad oggetti, sono indubbiamente più consone alla mentalità degli sviluppatori. Quali critiche potrebbero essere loro mosse? A parere di
Jeffrey Way queste innovazioni potrebbero
complicare la semplicità dei fogli di stile e intimidire i designer "puri", rispolverando la questione del rapporto fra sviluppo e design in ambito web. Non sembra tuttavia che occorra essere programmatori per apprezzare le possibilità aperte da questi strumenti; con un piccolo sforzo anche i web designer potranno avvantaggiarsi, e non poco, di questi futuribili aggiornamenti dei CSS.