Je me suis récemment intéressé à AngularJS, un framework JavaScript créé par Google. J’ai suivi des vidéos d’introduction/présentation de ce framework qui a l’air très prometteur. Dans ces vidéos, j’ai pu découvrir une technique permettant de coder très rapidement en HTML. Après quelques recherches, j’ai découvert qu’il s’agit de ce qu’on appelle le Zen Coding.
Présentation
Il s’agit de décrire les éléments HTML avec une syntaxe proche du CSS qui permet de générer le code HTML.
Ainsi
div#page>div.logo+ul#navigation>li*5>a
…sera transformé en :
<div id="page"> <div class="logo"></div> <ul id="navigation"> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> </ul> </div>
Il s’intègre dans la plupart des IDE sous la forme d’un plugin ou est intégré directement. Une extension pour Visual Studio est disponible dans la galerie des extensions par exemple.
Syntaxe
Attribut id et classe
div#page.section.main
devient
<div id="page" class="section main"> </div>
A noter que si le type d’élément n’est pas précisé avec un « # » ou « . », l’élément généré sera de type div. On aurait obtenu le même résultat avec
#page.section.main
Autres attributs
Il est possible de générer les autres attributs en les spécifiant entre crochets.
td[colspan=2]
devient
<td colspan="2"></td>
Multiplication d’éléments
Il est possible de multiplier la génération d’éléments via *
li*5
devient
<li></li> <li></li> <li></li> <li></li> <li></li>
Numérotation avec $
li.item$*3 générera 3 tags <li>, remplaçant $ par le l’index du tag.
<li class="item1"></li> <li class="item2"></li> <li class="item3"></li>
Nœuds Enfants et Frères
Il est possible de générer une arborescence complète via les opérateurs suivants :
- > permet d’indiquer que l’élément suivant est un enfant
- + permet d’indiquer que l’élément suivant est un frère
- ( ) permet d’indiquer un groupe
Ainsi
div#page>(div#header>ul#nav>li*4>a)+(div#page>(h1>span)+p*2)+div#footer
devient
<div id="page"> <div id="header"> <ul id="nav"> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> </ul> </div> <div id="page"> <h1><span></span></h1> <p></p> <p></p> </div> <div id="footer"></div> </div>
Support du texte (depuis la version 0.7)
Il est maintenant possible de renseigner du texte entre { }
p>{Click }+a{here}+{ to continue}.
devient
<p>Click <a href="">here</a> to continue </p>
Ressource
Pour en savoir plus, je vous invite à consulter les ressources suivantes :
- Une vidéo de présentation sur Vimeo [en]
- L’article de présentation sur Smashing Magazine [en]
Conclusion
Cette technique permet de gagner en rapidité lors de l’écriture de code HTML (compatible également XML et XSL). L’essayer c’est l’adopter. De plus il existe des extensions pour la plupart des éditeurs. Pourquoi s’en priver !!
Tweet
Hello,
Autant les codes du type ‘ li*5 ‘ je les trouve intéressant
autant les codes du type div#page.section.main je les trouve peu intuitif surtout avec l’intellinse que nous propose certains logiciels….
Donc a mon avis il faut bien reflechir avant d’apprendre a code d’une nouvelle facon puisque dans les faits ca revient a ca.
Uiop en mode optimisation