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