Schneller coden mit Zen Coding

Seit ein paar Monaten macht sich “Zen Coding” bei den Frontend-Webentwicklern breit. Es handelt sich dabei um ein Editor-Plugin für verschiedene Editoren (Textmate, UltraEdit, Aptana, …), das “Abkürzungen” in ausformulierten HTML-Code umsetzt.

Konkret heißt das, ich tippe in meinem Editor
div#content>h1+p.vorlauf+ul>li*3>a

anschließend folgt eine Tastenkombination, die Zen Coding zum unwandeln veranlasst (bei Textmate beispielsweise Apfel+E) und ich erhalte den folgenden Quelltext geschrieben:

<div id=“content”>
<h1></h1>
<p class=“vorlauf”></p>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</div>

Das ist enorm hilfreich beim Aufbau einer Website. Auch gibt es weitere kleinere Helferlein, beispielsweise erstellt mir
html:xs

das komplette HTML-Grundgerüst mit Doctype etc. einer XHTML-konformen Seite in der strict-Variante.
Die Selektoren dabei ergeben sich ganz von alleine, denn man kennt sie bereits von CSS.

Für einen Überblick über alle Code-Abkürzungen hilft am schnellsten ein CheatSheet weiter.