How to Code Like a Zen Master

My programming life has been changed forever. I’ve attained enlightenment … and so can you.

HTML and CSS may have revolutionized the Web and our careers, but writing tags every day can become a chore. Many IDEs and text editors offer features such as autocomplete and keyboard shortcuts, but they won’t significantly reduce your typing burden.

Zen Coding could be the answer. It’s a powerful abbreviation engine which expands CSS selector-like expressions into HTML code.

Let’s try a simple example. Assume you need a div with an ID of “content” which contains 3 p tags. You would type this string into your editor:


then hit the Zen Coding “Expand Abbreviation” menu item or keyboard shortcut. The code is magically transformed into valid HTML:

<div id="content">

Want to be a little more adventurous? The following abbreviation:


expands to:

<div id="page">
  <p class="top"></p>
  <ul id="nav">
    <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>

Not hard-core enough? Enter this:


to generate a full HTML5 template:

<html lang="en-US">
  <meta charset="UTF-8">
  <div id="header">
  <div id="content">
  <ul id="nav">
    <li class="item1"><a href="#"></a></li>
    <li class="item2"><a href="#"></a></li>
    <li class="item3"><a href="#"></a></li>
    <li class="item4"><a href="#"></a></li>
    <li class="item5"><a href="#"></a></li>
    <li class="item6"><a href="#"></a></li>
  <div id="footer"></div>

How much time and effort would that save you? There’s also a range of CSS abbreviations for your style sheets.

The Art of Downloading Zen

Zen is available as a plugin for a wide range of popular IDEs and editors, including:

  • Aptana
  • BBEdit
  • Coda
  • Dreamweaver
  • Eclipse
  • Emacs
  • Espresso
  • GEdit
  • Komodo
  • Notepad++
  • PSPad
  • TextMate
  • TopStyle
  • UltraEdit
  • Vim
  • Visual Studio

Many of the abbreviations are obvious, but a Zen cheat sheet is available should you require further help.

Why not try Zen? Your colleagues will be amazed by your productivity, and your fingers will thank you!