Zen Coding – Speedy way to write HTML and CSS code

A typical CSS/HTML code for a page contains lots of redundant codes such as repeating DIV tags, A tags, attributes etc. You can minimize the amount of work by copy pasting most of these stuff, or if your code editor has auto-completion feature, but still you have to do a lot of typing.

Zen Coding is a set of plug-ins for popular code editors that will change the way you code. Zen Coding consists of two core components: an abbreviation expander which allows you to expand expressions similar to CSS-like selectors, and context-independent HTML-pair tag matcher. This allows you to write HTML, XML, XSL and any other structured code format in super high speed.

For example, if you write:


… it gets magically expanded into

<div id="page">
        <div class="logo"></div>
        <ul id="navigation">
                <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>

Let’s look at another example. Suppose you want to generate three <div> elements with ids i1-test, i2-test and i3-test and item1, item2 and item3 classes. You can write this as:


and this would be transformed into

<div id="i1-test" class="item1"></div>
<div id="i2-test" class="item2"></div>
<div id="i3-test" class="item3"></div>

Zen Coding officially supports a majority of popular coding editors such as

  • Aptana/Eclipse (cross-platform)
  • TextMate (Mac)
  • Coda (Mac)
  • Espresso (Mac)
  • Komodo Edit/IDE (cross-platform)
  • Notepad++ (Windows)
  • PSPad (Windows)

Support through third-party plug-ins are available for

  • Dreamweaver (Windows, Mac)
  • Sublime Text (Windows)
  • UltraEdit (Windows)
  • TopStyle (Windows)
  • GEdit (crossplatform)
  • BBEdit/TextWrangler (Mac)
  • Visual Studio (Windows)
Be the first to comment

Leave a Reply

Your email address will not be published. Required fields are marked *