Write HTML and CSS quicker with with Zen Coding

A pretty neat plugin for TextMate (and a few other text editors) that I have started using is Zen Coding. I’d heard of it before but didn’t “get it” until I read Jonathan Christopher’s blog post The Art of zen-coding: Bringing Snippets to a New Level.

Jonathan explains very well what you can do with Zen Coding, so I’m not going to get into much detail. One example though. Zen Coding lets you use syntax that looks very much like CSS selectors to write HTML, which can look like this:

  1. div#news.module>div.header+div.body>ul>li#item-$*5

When you put the cursor at the end of that line and execute the Zen Coding command, the result will be the following HTML snippet:

  1. <div id="news" class="module">
  2. <div class="header"></div>
  3. <div class="body">
  4. <ul>
  5. <li id="item-1"></li>
  6. <li id="item-2"></li>
  7. <li id="item-3"></li>
  8. <li id="item-4"></li>
  9. <li id="item-5"></li>
  10. </ul>
  11. </div>
  12. </div>

This is just one quick example of what Zen Coding can do. Try it out for yourself.

Posted on September 21, 2009 in Coding, Productivity

Comments are disabled for this post (read why), but if you have spotted an error or have additional info that you think should be in this post, feel free to contact me.