Zen Coding: Overview and Examples

Designing a new website is always something fresh, appealing and interesting. On the other hand, web coding is very often nothing but a repetitive and boring task, with some exceptions now and then.

For example, every website that is coded by web standards should have HTML tags that use standardized IDs. The titles of these IDs (such as banner, footer, sidebar, main, navigation) are well known outside the web developer world as well. Regardless of this, the Russian developer Vadim Makeev proposed the concept of high-speed HTML and CSS coding, simply called Zen Coding. Afterwards, this concept was later developed by another Russian developer Sergey Chikuyonok.

There are several front-end development tools available, either open source (such as Notepad++ and Aptana Studio) or commercial and fairly expensive ones, such as Adobe Dreamweaver. All these tools have offered auto complete functions that made coding faster years ago.

Further, there are some coding frameworks available as well, such as renowned grid960 system. Despite this, Zen Coding offers something completely different and new, something that every front-end should benefit from greatly. Zen Coding is available as a free plugin for several editors, such as Aptana, TextMate, Coda, Notepad++, Visual Studio, Dreamweaver and others.

Zen Coding itself is made of two core components: a context-independent HTML-pair tag matcher and an abbreviation expander.

The HTML-pair tag matcher is to be used for one very common task; finding the tag pair of a certain HTML element. This component finds the relevant tag with respect to the current position of the cursor.

On the other hand, the abbreviation expander is something that gives Zen Coding its true power. As the name suggests, this component expands HTML and CSS expressions into HTML/CSS code.

Finally, there is the combination of the components mentioned above. This combination can be referred as wrapping with abbreviation function. Since the HTML-pair tag matcher is a rather understandable function, the following section gives examples of the other two Zen Coding functions.

The abbreviation expander currently supports numerous properties and operators (there is a Zen Coding cheat sheet available online). Some of them, which most developers will use frequently, are the abbreviation expander for ID and CLASS attributes, element multiplication and item numbering. In practice (assuming that the required Zen Coding plug-in is installed and activated), this looks like this:

• Typing div#content + tab brings out the following output:

<div id=“content“></div>, where the cursor is pointed inside that element

• Typing div.class1 + tab brings out the following output:

<div class=“class1“></div>, where the cursor is pointed inside that element

• Typing div#banner>div.logo+ul#navigation>li*4>a brings out the following output:

<div>

<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>

</ul>

</div>

• Finally, wrapping with the abbreviation function works in the following way.

As an example, the following items are given:

Home

About

Portfolio

Blog

Contact

If the ul#navigation>li.item$*>a> abbreviation is wrapped around these items, the following output appears:

<ul>

<li><a href="">Home</a></li>

<li><a href="">About</a></li>

<li><a href="">Portfolio</a></li>

<li><a href="">Blog</a></li>

<li><a href="">Contact</a></li>

</ul>

Although the developer of Zen Coding points to the fact that there is lot of work to be done, this method of coding is already something rather mature and appears to be an excellent time saver for web developers. Almost all popular editors are supported and best of all, adaptation to this type of coding is almost painless.

Zen Coding - Plugin information and download links, hosted on Google; retrieved on July 31, 2010

http://code.google.com/p/zen-coding/