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!
Craig BucklerCraig is a freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he's been advocating standards, accessibility, and best-practice HTML5 techniques. He's created enterprise specifications, websites and online applications for companies and organisations including the UK Parliament, the European Parliament, the Department of Energy & Climate Change, Microsoft, and more. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler.
