Zen Coding!

Last night whilst was watching a PluralSight video by Shawn Wildermuth, one of the chapters mentioned a plugin called Zen Coding. I've heard about this in the past, but had forgotten about it until now - which was a mistake!

It basically takes short expressions and converts them to HTML code. The expressions can be as simple, or as complex as you like.

The best way I can explain this is with an example. I'll go straight in with a more complicated example to quickly demonstrate the power of this...

In your HTML markup if you type the following expression:

.productList>.product*5>h1.productName+span.productDescription

Then press the tab key. That expression will magically be replaced with:

<div class="productList">
    <div class="product">
        <h1 class="productName"></h1>
        <span class="productDescription"></span>
    </div>
    <div class="product">
        <h1 class="productName"></h1>
        <span class="productDescription"></span>
    </div>
    <div class="product">
        <h1 class="productName"></h1>
        <span class="productDescription"></span>
    </div>
    <div class="product">
        <h1 class="productName"></h1>
        <span class="productDescription"></span>
    </div>
    <div class="product">
        <h1 class="productName"></h1>
        <span class="productDescription"></span>
    </div>
</div>

So let's break it down a bit to see what's going on.

First of all, note that div.something means create a div with a class called something (ie. <div class='something'>). Likewise, span.something does the same with a span, and so on for pretty much all HTML elements. However, if you don't specify an element type, then a div is implicitly implied (eg. .something is the same as div.something).

Two other operators to note are > and +. The first means the what follows is a child element, and the latter means that what follows is a sibling element.

Let's split our expression into bits with an explanation ...

• .productList Create a div with a class called 'productList'.
• > What follows are children of the 'productList' div.
• .product*5 Create 5 divs with class 'product'.
• > What follows are children of each of the 5 'product' divs (repeated for each of the 5 divs).
• h1.productName Create an h1 element with class='productName'.
• + What follows is a sibling of the previous bit.
• span.productDescription Create a span with class 'productDescription'.

Imagine how quickly you can create entire page layouts, and how much typing you have just saved!

Note that after pressing tab, you can press undo to revert back to the original expression - so you can quickly see what your expression will translate to, then switch back and make tweaks until you're happy with it.

Multiple Classes

As we've seen, .something creates a div with class='something'. You can also chain multiple classes, for example .something.btn.button, which becomes <div class="something btn button"></div>.

Attributes

You can insert custom attributes using square brackets:

.product>.productDescription[data-bind='text:description']

then becomes ...

<div class="product">
    <div class="productDescription" data-bind="text:description"></div>
</div>

So how do I get it?

There are plugins for a wide range of editors. My three primary editors are Visual Studio, Sublime Text 3, and Vim. Luckily, all three have Zen Coding extensions.

If you're using Visual Studio, then I'd recommend installing it as part of Web Essentials, which also includes a lot of other amazing functionality.

If you're using Sublime Text, then it has another name called Emmet.

I've tested it on both Visual Studio and Sublime, and they both work great. I've not tried the Vim solution yet, but will update this post when I do.

Looking at the list of supported editors on the Zen Coding homepage, I'm sure you'll find a version for whatever your taste in editor... I mean, there's even Notepad++ plugin!

Summary

I intentially didn't start with a very simple 'hello world' example, as I wanted to show its power without giving tons of examples. However, the expressions can be much simpiler, or much more complicated. It's a time saving either way. Just using it to create single HTML element, eg. div, span, p, etc is faster than typing it manually with the angled brackets. On the flip side, you can use it for far more complicated expressions than my example, using parenthesis to group parts of your expressions.