[Code] Rendere il CSS più semplice e potente

Di - 14 November 2011 - in

Giusto un paio di anni fa Google ha lanciato i closure tool, strumenti che fornivano agli sviluppatori nuove modalità di organizzazione e ottimizzazione del codice JavaScript e HTML.
A due anni di distanza Google Code introduce un nuovo strumento dedicato a rendere la vita degli sviluppatori un po’ più semplice.
Questa è la volta del CSS.

I CSS, o Cascading Style Sheets, sono nati nel 1996 con lo scopo di definire la formattazione di una pagina web, tenendo questa parte separata dalla programmazione HTML.
Per quanto utili però i CSS non possono certo essere definiti eleganti e violano infatti uno dei principi cardini del buon sviluppo software: il principio DRY o “don’t repeat yourself” o DIE “duplicate is evil” o ancora SPT “single point of truth”.
Se per esempio un colore viene usato in diverse classi del foglio di stile esso deve necessariamente essere copiato e incollato diverse volte perché il CSS non ha il concetto di variabile.
Inoltre se c’è un valore in un foglio di stile che è derivato da altri valori non c’è modo di esprimerlo perché il CSS non possiede il concetto di funzione.
Ogni blocco che contiene proprietà simili deve essere ripetuto più e più volte, cosa che naturalmente contribuisce ad avere un codice caotico, poco leggibile e difficile da manutenere.

Per mettere per così dire una pezza a queste carenze del CSS, il team di Google Code ha appena rilasciato Closure Stylesheet, un’estensione al CSS che aggiunge variabili, funzioni, condizioni e mixin al CSS standard.
Vediamo un esempio di definizione di variabili (e variabili a partire da altre variabili) da utilizzare più volte.

@def BG_COLOR              rgb(235, 239, 249);
@def DIALOG_BORDER_COLOR   rgb(107, 144, 218);
@def DIALOG_BG_COLOR       BG_COLOR;

body
{
  background
-color: BG_COLOR;
}
.dialog {
  background
-color: DIALOG_BG_COLOR;
  border
: 1px solid DIALOG_BORDER_COLOR;
}

L’add-on può essere scaricato come Java jar e necessita Java per essere avviato.
Questo tool porta una ventata d’aria fresca nel caos del CSS.
Se siete sviluppatori di siti web fateci sapere cosa ne pensate di questo utile, a nostro avviso, strumento.

Leave a Reply

Gabriele Visconti Articolo scritto da

Editor in Chief per Engeene. Appassionato di Linux, FOSS, videogame e, da poco, di cucina. Parla quattro lingue ed ama leggere libri in lingua inglese.

Contatta l'autore

Previous post:

Next post: