Faire du HTML et du CSS est assez rébarbatif : toujours les mêmes balises, recopier les balises de fin, écrire des attributs class ou id… bref, un peu tout le temps la même chose en plusieurs exemplaires. C’est là que ZenCoding intervient !
Zen Coding, c’est quoi ?
Zend Coding est un plugin d’aide à la saisie pour votre HTML et votre CSS.
Concrètement, ça accélère la saisie, confère l’exemple ci-dessous !
Voici ce que l’on souhaite écrire comme code :
- <div id="content">
- <ul class="list">
- <li></li>
- <li></li>
- <li></li>
- </ul>
- </div>
Et voici comment on va taper ça sur notre clavier :
div#content>ul.list>li*3 <Commande magique qui dépend de l'éditeur>
Fonctionnement
D’une manière plus générale, Zen Coding va interprété ce que vous venez d’écrire pour le transformer en code.
Dans notre exemple, nous avons utiliser une notation très proche du CSS pour écrire de l’HTML sans effort !
Mais ça marche aussi avec le CSS, notamment pour les attributs un peu long à écrire (ou à faire auto-compléter par l’éditeur), voire pour les valeurs. Il est en effet plus rapide de taper d:n<TAB> que display: none; avec la majorité des outils d’autocomplete.
Compatibilité
Le plugin est compatible avec énormément d’IDE, tels que Eclipse ou Vim (pour mon utilisation personnelle).
Plus d’informations sur le site de Zen Coding (hosté sur google code).