🤩 Access a heap of free courses with a SitePoint account

How to Code Like a Zen Master

    Craig Buckler
    Share

    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:

    
    div#content>p*3
    

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

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

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

    
    div#page>p.top+ul#nav>li*5>a
    

    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>
      </ul>
    </div>
    

    Not hard-core enough? Enter this:

    
    html:5>(div#header>h1)+(div#content>p*3)+(ul#nav>li.item$*6>a[href="#"])+div#footer
    

    to generate a full HTML5 template:

    
    <!DOCTYPE HTML>
    <html lang="en-US">
    <head>
      <meta charset="UTF-8">
      <title></title>
    </head>
    <body>
      <div id="header">
        <h1></h1>
      </div>
      <div id="content">
        <p></p>
        <p></p>
        <p></p>
      </div>
      <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>
      </ul>
      <div id="footer"></div>
    </body>
    </html>
    

    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!