If you are a web developer doing any kind of CSS and HTML work then you need to be using the zen-coding plugins. So what exactly is zen-coding? It’s not a new language, but more of shortcut system for generating structured code, such as HTML or XML, using a CSS selector like syntax. If you don’t get it yet, you’ll see the beauty within seconds of playing with the language.
There are currently plugins available for a wide range of popular text editors on what ever platform you use for development. I’ve become a MacBook fan lately. I installed the plugin for the popular Coda editor and was off and running in minutes. To see if there is a plugin available for your favorite editor check out the official zen-coding page. Download a version that will work with your favorite editor.
After I installed the Coda plugin I just had to setup the shortcut key I wanted to use for code completion. In my case this is control + e. Then you just have to get familiar with the syntax for generating structured code. If you are familiar with CSS at all then picking up the syntax should be very simple. If you are not familiar with the syntax, put the time in to learn. Trust me, once you know the syntax you will save tons of time coding.
I’ll give you a few short example to get you started.
Let’s say you wanted to general a basic html starter template. All you would have to type is:
html>head+body
What this says is that you want to generate an HTML tag. The ‘>’ character signals that you want the follow tag to be a child, or a nested element, of the head tag. The ‘+’ signals that you want the body tag to be a sibling of of the head tag. Now in my editor all I do is type that line and press control + e and the editor will generate:
<html> <head></head> <body></body> </html>
A better example might be if you wanted to create a div with the id of ‘container’ and within that div you want to create an unordered list. Of course we’ll have to add list items to the unordered list and since this will be a menu, we’ll want to add links. Sure you could do this manually, or you could do it like this:
div#container>ul.menu>li*5>a[href="#"]
which will generate:
<div id="container"> <ul class="menu"> <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>
What if you wanted to add a unique class to each link? You could do something like this:
div#container>ul.menu>li*5>a[href="#"].item-$
You’ll get:
<div id="container"> <ul class="menu"> <li><a href="#" class="item-1"></a></li> <li><a href="#" class="item-2"></a></li> <li><a href="#" class="item-3"></a></li> <li><a href="#" class="item-4"></a></li> <li><a href="#" class="item-5"></a></li> </ul> </div>
There is much more you can do. You can group items using parenthesis and even add text to elements if you would like.
div#container>(ul.menu>li*5>a[href="#"].item-$)+p.stuff{hello world}
How about this:
<div id="container"> <ul class="menu"> <li><a href="#" class="item-1"></a></li> <li><a href="#" class="item-2"></a></li> <li><a href="#" class="item-3"></a></li> <li><a href="#" class="item-4"></a></li> <li><a href="#" class="item-5"></a></li> </ul> <p class="stuff">hello world</p> </div>
I’ve only demonstrated some of the potential of the zen-coding project. With support for tags, ID and class attributes, custom attributes, multiplication of elements, grouping and nesting there is not much you can’t do. You can fully code an entire document in a single line of syntax if you wish. To find out more make sure you checkout the official zen-coding page, I will definitely be using it.
Johnathan Ward is an experienced developer and consultant that writes tutorials to help other developers. In his day job, he is an IBM Watson Consultant with several years of experience deploying and customizing Watson Explorer solutions.