Le magie di Zen Coding

Avevo salvato la segnalazione tra i bookmark in attesa di una prova sul campo e ieri ho finalmente trovato il tempo per approfondire l'utilità  di Zen Coding.

"Un nuovo modo per scrivere HTML e CSS" recita la descrizione del progetto, perché di questo si tratta. Zen Coding è nella sua funzione primaria un motore per abbreviazioni. In pratica, possiamo scrivere codice HTML e CSS (ma anche XML/XSL) nella forma e nella sintassi abbreviate definite nella documentazione ufficiale (elementi HTML, selettori HTML, proprietà  CSS) e poi espandere il tutto nella forma estesa, perdonatemi la banalità , con un solo click (o con la pressione di una combinazione di tasti).

Sono disponibili plugin per i principali editor di codice, ma è anche possibile implementare le funzionalità  di Zen Coding su una textarea (demo) o su un'aerea editabile (demo) incorporate in una pagina web.

Proprio partendo dalla prima demo possiamo farci un'idea più chiara del funzionamento.

Si parte da questa riga di codice:

html:5>div#page>div#header>ul.navigation>li*4>a

Come si nota, la sintassi ricorda quella dei CSS: il segno >, ad esempio, indica che l'elemento a destra è figlio di quello a sinistra.

Nell'esempio si crea la struttura di base di un documento secondo il DOCTYPE HTML5, poi si inserisce un div con id="page", al suo interno si definisce un altro div con id="header"; quindi, una lista non ordinata con classe navigation e quattro li che contengono ciascuno un elemento a.

Nella demo, per espandere l'abbreviazione, basterà  selezionare la riga e usare la combinazione di tasti Command+E.