Limiti e difetti del CSS L`utilità di Less CSS Come usare Less CSS

LESS CSS: la rivoluzione negli stili
LESS velocizza lo sviluppo di progetti Web e trasforma il
CSS in un linguaggio dinamico. Vediamo come funziona,
quanto è utile e quali sono i suoi punti deboli.
Indice
Less è un linguaggio di programmazione per la compilazione di fogli di stile CSS.
Less permette di trasformare la semplice sintassi del CSS in un linguaggio di
programmazione pseudo-funzionale offrendo allo sviluppatore ed al designer web
strumenti avanzati come funzioni, variabili ed operazioni.
Limiti e difetti del CSS
L'operazione di stilizzazione di una pagina web, specie in progetti di grosse
dimensioni, richiede generalmente parecchio tempo: scrivere un foglio di stile CSS
è spesso impegnativo e noioso ed il designer web si imbatte in un "paradigma
ridondante" pieno di ripetizioni di proprietà e valori.
Molto spesso la complessità e la ridondanza del CSS è causata dalla mancanza di
un'analisi ed una progettazione efficaci ed in grado di tamponare i difetti del css:
sezionare il layout di una pagina ed ottimizzare il numero di classi e proprietà può
ad esempio rendere la scrittura di un css molto più veloce.
Sono però determinanti i limiti intrinsechi del CSS che, avendo una sintassi limitata,
affronta la pagina (DOM) e le proprietà grafiche in maniera semplicistica.
L'utilità di Less CSS
LESS porta il linguaggio CSS ad un livello superiore avvicinandolo al paradigma di
programmazione funzionale: grazie a LESS è possibile dichiarare variabili, funzioni
e fare uso dei Mixins, una speciale funzione che permette di dichiarare una classe
contenente una serie di proprietà da poter integrare all'interno di un altro selettore,
il quale ne erediterà le proprietà.
Less permette inoltre l'annidamento (nesting) dei selettori semplificando la
creazione e la gestione dei selettori discendenti (#header p .link {}) che,
seppur sconsigliati, sono spesso usati dai web designer.
Come usare Less CSS
Usare Less css non richiede particolari conoscenze tecniche e, dopo qualche
minuto dedicato allo studio delle sue funzionalità, può realmente far risparmiare
parecchio tempo durante la stesura dei fogli di stile. Per implementare Less in una
pagina web è necessario fare uso del compilatore che si curerà di eseguire il
parsing del codice Less restituendo in output un CSS in formato standard.
È possibile compilare Less in due modi diversi: aggiungendo uno script javascript
nelle vostre pagine oppure compilando il codice less direttamente nel server, grazie
al compilatore per node.js o al compilatore leesphp.
Less lato client (javascript)
Implementare lo script javascript è altamente sconsigliato perché nel caso in cui
un utente abbia disabilitato javascript nel proprio browser, vedrà la pagina senza
alcuno stile css; inoltre, se il vostro foglio di stile è abbastanza pesante, compilarlo
lato client potrebbe rallentare il rendering della pagina intaccando la user
experience. Per questo consigliamo, per i progetti in produzione, di compilare less
lato server per usufruire dei suoi vantaggi senza rischiare alcun
malfunzionamento.
Implementare il compilatore javascript è comunque utile in fase di test e per farlo è
sufficiente scaricare la libreria dal sito ufficiale di Less, inserire il link al proprio stile
less usando l'attributo rel="sylesheet/less" ed aggiungere lo script alle
proprie pagine web così come nell'esempio. Lo script riconosce automaticamente lo
stile in formato less e si cura di compilarlo in css.
<link rel="stylesheet/less" type="text/css"
href="styles.less">
<script src="/path/to/less.js"></script>
Ricordate di inserire il foglio di stile prima dello script altrimenti potreste avere
problemi durante la sua compilazione.
Less lato server
Compilare gli stili less sul server è sicuramente la scelta obbligatoria per tutti i
progetti in produzione. La compilazione lato server permette di sfruttare le
potenzialità di Less senza rischi integrando nella pagina HTML un file già compilato
in formato css. Delegare al server la compilazione dei file less potrebbe
sovraccaricare la CPU, per questo è opportuno compilare staticamente i file o
utilizzare una cache per memorizzare i file già compilati. Evitate quindi di compilare
i file less ad ogni refresh.
Compilatore per node.js
Installare la libreria less per node.js è semplicissimo e, se usate npm, vi basta
digitare npm install less. Il pacchetto per node.js include un eseguibile nella
directory /bin che permette di compilare i file in modalità offline dalla riga di
comando.Per la documentazione completa vi rimandiamo alla pagina ufficiale.
Lessphp, compilatore in php
Lessphp è un compilatore less scritto in php. È possibile scaricarlo da qui e si
presenta come una classe da includere facilmente negli script già esistenti.
Manuale Less CSS
Come abbiamo già detto, Less offre parecchie funzionalità che estendono il CSS e
lo rendono uno strumento più flessibile e funzionale, vediamo insieme le
caratteristiche particolari di Less spiegate attraverso semplici esempi di codice.
Variabili
Grazie a Less è possibile dichiarare delle variabili, con dei nomi mnemonici, da
poter richiamare in qualsiasi momento e da poter inserire come regole in qualsiasi
selettore. Grazie alle variabili è possibile semplificare il CSS dedicando ad
esempio una sezione del file alla dichiarazione delle variabili che verranno di volta
in volta richiamate nelle regole del foglio di stile. Apportare modifiche alle regole
CSS sarà molto più semplice ed immediato.
Vediamo un esempio di utilizzo di variabili in Less. Nel codice in basso sono
dichiarate quattro variabili (@blue, @orange, @lightBlack e @mainFont), le prime
tre contengono dei colori in esadecimale (hex) mentre l'ultima contiene una famiglia
di caratteri:
@blue: #002982;
@orange: #FF7300;
@lightBlack: #111;
@mainFont: 'Arial';
#para{
font-family: @mainFont;
color: @orange;
background-color: @lightBlack;
border: solid 1px @blue;
}
Dopo aver inserito le variabili nelle regole CSS dell'elemento #para avremo in
output un foglio di stile nel quale le variabili verranno sostituite dai valori che
contengono:
#para{
font-family: 'Arial';
color: #FF7300;
background-color: #111;
border: solid 1px #002982;
}
Ricordate che le variabili in Less devono essere attualmente considerate delle
costanti in quanto possono essere dichiarate una sola volta e non possono essere
sovrascritte. Usando però lessphp per la compilazione dei fogli di stile sembra
possibile sovrascriverle con successo senza imbattersi in errori di compilazione
(Abbiamo testato lessphp ed abbiamo notato con piacere questa funzione).
I Mixins
I Mixins non sono altro che delle classi che offrono però una maggiore flessibilità:
dopo aver dichiarato una classe con delle proprietà è possibile includerla in una
regola; tutte le proprietà della classe verranno quindi ereditate dalla regola.
Guardate ad esempio il seguente codice nel quale viene dichiarata la classe
.borderDot che in seguito viene integrata nel #menu:
@lightBlack: #111;
@mainFont: 'Arial';
.borderDot{
border: dotted 1px @lightBlack;
}
#menu{
.borderDot;
}
Dopo aver compilato il codice, il #menu avrà ereditato le proprietà della classe
.borderDot ed il foglio di stile apparirà così:
.borderDot {
border: dotted 1px #111111;
}
#menu{
border: dotted 1px #111;
}
I mixins non fanno altro che spostare l'assegnazione delle classi dal documento
HTML al foglio di stile. Ricordate però di non abusare dei Mixins perché si rischia
di veder crescere il peso in kilobyte dei propri fogli di stile. Evitate quindi di utilizzare
i Mixins in questo modo:
@lightBlack: #111;
@mainFont: 'Arial';
.borderDot{
border: dotted 1px @lightBlack;
font-family: @mainFont;
}
#menu{
background: #f0f0f0;
.borderDot;
}
#header{
background: #a0a0a0;
.borderDot;
}
#nav{
background: #c0c0c0;
.borderDot;
}
#col{
background: #d0d0d0;
.borderDot;
}
Perché il foglio di stile risultante avrà questo aspetto:
.borderDot {
border: dotted 1px #111111;
font-family: 'Arial';
}
#menu {
background: #f0f0f0;
border: dotted 1px #111111;
font-family: 'Arial';
}
#header {
background: #a0a0a0;
border: dotted 1px #111111;
font-family: 'Arial';
}
#nav {
background: #c0c0c0;
border: dotted 1px #111111;
font-family: 'Arial';
}
#col {
background: #d0d0d0;
border: dotted 1px #111111;
font-family: 'Arial';
}
ed avrà sicuramente un peso in kilobyte superiore ad un tradizionale foglio di stile
come il seguente:
.borderDot {
border: dotted 1px #111111;
font-family: 'Arial';
}
#menu {
background: #f0f0f0;
}
#header {
background: #a0a0a0;
}
#nav {
background: #c0c0c0;
}
#col {
background: #d0d0d0;
}
In questo caso l'utilizzo tradizionale del selettore di classi permette di avere dei
CSS più leggeri di quelli offerti dall'utilizzo dei Mixins. Ricordatevi sempre che la
classe .borderDot può benissimo essere assegnata agli elementi HTML che
desiderate utilizzando l'attributo class=.I Mixins, tranne in rari casi, sono quindi da
evitare perchè rischiano di appesantire il vostro CSS.
Funzioni (Mixins parametrici)
Una delle caratteristiche più interessanti di Less è sicuramente quella di poter
dichiarare delle funzioni tramite le quali controllare determinate proprietà di un
elemento in base ai valori passati come argomento. Nell'esempio seguente
vediamo come la funzione .border-radius(@arg) possa aiutare nelle
generazione e nel controllo delle tre diverse varianti della proprietà borderradius.
Nel codice in basso viene dichiarata la funzione .border-radius(@arg) che
accetta come argomento l'ampiezza del raggio di stondatura:
/* Dichiariamo la funzione .border-radius() */
.border-radius (@radius) {
border-radius: @radius;
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
}
/* La inseriamo nel selettore #main passando come argomento
4px */
#main {
.border-radius(4px);
}
/* La inseriamo nel selettore #last passando come argomento
12px */
#last {
.border-radius(12px);
}
A questo punto gli elementi #main e #last, nei quali è stata inserita la funzione,
saranno riempiti con le tre proprietà del css3 per generare angoli stondati:
#main {
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}
#last {
border-radius: 12px;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
}
Le funzioni in Less sono sicuramente una delle features più utili ma anche per loro
vale la regola dei Mixins: non esagerate nell'utilizzo delle funzioni, il CSS offre già
la possibilità di aggiungere le stesse proprietà a più elementi contemporaneamente
grazie all'utilizzo delle classi, usate quindi le funzioni di LESS solo quando
strettamente necessario.
Annidamento delle regole css
Less permette l'annidamento delle regole css semplificando la scrittura di selettori
discendenti. Grazie a less è possibile utilizzare uno stile di programmazione molto
più elastico e fondato sul concetto di gerarchia degli elementi.Questo blocco di css:
#header { color: black; }
#header .navigation {
font-size: 12px;
}
#header .logo {
width: 300px;
}
#header .logo:hover {
text-decoration: none;
}
In less può essere scritto in questo modo:
#header {
color: black;
.navigation {
font-size: 12px;
}
.logo {
width: 300px;
&:hover { text-decoration: none }
}
}
Notate come le regole .navigation e .logo siano state scritte all'interno della
regola #header, la quale verrà riconosciuta da Less come parent delle regole
annidate.Fate attenzione all'utilizzo dell'operatore & che in less si riferisce al
selettore parent .logo piuttosto che al selettore root #header. Tale utilizzo della &
risulta comodissimo per la dichiarazione di pseudoclassi come ad esempio
:hover e :focus.
Operazioni matematiche
Tutti i numeri, le variabili ed i colori possono diventare termini di operazioni
matematiche aiutando il designer web nella gestione della proporzionalità e
dell'armonia cromatica degli elementi. Le operazioni seguenti sono tutte
correttamente interpretate dal compilatore Less.
@var: 10px;
@varPerc: 20%;
@newVar: @var*3;
@newVarPerc: @varPerc/2;
@color: #B60000;
@newColor: @color+#FF4848;
@foo: (@var*20)+@newVar;
Funzioni integrate in Less
Less, oltre ad offrire le funzionalità già viste, integra una piccola libreria standard
che offre funzioni per l'alterazione dei colori ed un paio di funzioni matematiche:
@color, 10%);
// ritorna un colore il 10% più luminoso
color, 10%);
// ritorna un colore il 10% più scuro
color, 10%);
// ritorna un colore il 10% più saturo
@color, 10%);
// ritorna un colore il 10% meno saturo
@color, 10%);
// ritorna un colore il 10% più opaco
@color, 10%);
// ritorna un colore il 10% più trasparente
@color, 50%);
// ritorna un colore con alpha 50%
@color, 10);
// ritorna un colore 10 gradi a destra
@color, -10);
// ritorna un colore 10 gradi a destra
@color1, @color2, 50%); // ritorna un mix di colori al 50%
@color);
// ritorna il valore del canale hue
@color);
// ritorna il valore del canale saturation
@color);
// ritorna il valore del canale lightness
@color);
// ritorna il valore del canale alpha
1.67);
// approssima per eccesso, output: 2
2.4);
// approssima per eccesso, output: 3
2.6);
// approssima per difetto, output: 2
0.675);
// converte un numero in %, output: 67.5%
Svantaggi e critiche a Less
Less è davvero un progetto interessante e, anche se giovane, offre strumenti e
funzionalità molto utili per lo sviluppo di interfacce grafiche web. Pensate ad
esempio alla possibilità di utilizzare le variabili o le operazioni matematiche che
rendono il css molto più flessibile e rivoluzionano il modo di pensare e progettare i
fogli di stile.
Sfortunatamente non tutte le funzioni offerte da Less sono realmente utili ed alcune
possono addirittura essere considerate svantaggiose. Sono un esempio i mixins e
le funzioni, che rischiano, se utilizzate troppo spesso, di restituire in output fogli di
stile più pesanti del necessario inducendo lo sviluppatore a commettere un grosso
errore: scordarsi dell'antico uso delle classi.
Altro svantaggio di Less è l'annidamento delle regole che, rendendo più semplice (e
immediato) l'utilizzo di selettori discendenti, potrebbe invogliare lo sviluppatore ad
abusarne, producendo un effetto catastrofico. I selettori discendenti sono da evitare
perché più pesanti da elaborare rispetto ad un selettore di id o di classi.
Usate Less ma ricordatevi di farlo con responsabilità e parsimonia preferendo le
funzioni realmente utili come le variabili, le operazioni matematiche e le funzioni
integrate piuttosto che quelle spudoratamente inutili.