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.
