Zen Coding est un outil très pratique pour l’écriture plus rapide et plus facile du code HTML en utilisant les sélecteurs de syntaxe CSS. Il a été développé par Sergey Chikuyonok et publié par Smashing Magazine.

En moyenne combien de temps passez-vous à écrire du code HTML : l’ensemble des balises, les attributs, les styles, les citations, les accolades, etc.? Les logiciels d’édition HTML nous permettent de gagner pas mal de temps dans cette écriture grâce à l’auto-complétion, au formatage ou à la fermeture automatique des balises … mais nous sommes encore loin d’un style dactylographique !

Avant l’apparition des frameworks Javascript, il était difficile et fastidieux de parcourir les éléments d’une page web sans être obligé de déployer beaucoup de codes, qui s’avérait être peu réutilisable. Dorénavant grâce à ces frameworks et à l’introduction des moteurs de sélections CSS, il devient très facile d’accéder aux éléments du DOM.

Que diriez-vous si, en plus d’utiliser les sélecteurs CSS, vous pouviez générer du code?

Par exemple, en écrivant simplement…

div#content>h1+p

et obtenir ceci en sortie ?

<div id="content">
<h1></h1>
<p></p>
</div>

Initialement proposée par Vadim Makeev (article en russe) en avril 2009, Zen Coding a été développé par Sergey Chikuyonok pour les derniers mois et a finalement atteint un stade mature.

Regardez plutôt la vidéo de démonstration pour voir ce que Zen Coding est capable de faire…

Démo

• Démo (utiliser Ctrl + , pour afficher une abréviation, requiert l’activation du JavaScript)

Téléchargements

Zen Coding est disponible sous forme de plugin et intègre toutes les fonctionnalités pour les éditeurs suivants :

• Aptana (cross-platform)
• Coda, via TEA for Coda (Mac)
• Espresso, via TEA for Espresso (Mac)

Il est également disponible pour d’autres éditeurs HTML mais n’intègre que l’affichage des abbréviations :

• TextMate (Mac, mais peut être utilisé avec E-Text Editor pour Windows)
• TopStyle
• Sublime Text
• GEdit
• editArea online editor

Si vous désirez en savoir plus sur l’ensemble des fonctionnalités et des possibilités de Zen Coding, je vous invite à consulter l’article original publié par Smashing Magazine.