File Under: CSS, HTML, Web Apps

Zen Coding Auto-Generates HTML from CSS

Writing HTML can be something of a pain. Angle brackets and long tags names mean you’ll spend more time typing awkward code than your average programming task requires.

Good text editors and development environments like BBEdit, Eclipse or Adobe Dreamweaver can help simplify your HTML workload, but what we’ve always longed for is a Markdown-like way to create raw HTML.

Smashing Magazine’s Sergey Chikuyonok recently unveiled a programming tool called Zen Coding that isn’t quite Markdown-level bliss, but it’s pretty close. Chikuyonok created Zen Coding from a very basic idea: what if CSS selectors could not just target HTML tags, but also generate them?

In other words, if you’re using Chikuyonok’s tools, writing CSS like this:

div#content>h1+p

will generate HTML markup like this:


<div id="content">

   <h1></h1>

   <p></p>

</div>

Veteran coders will likely protest that there are already tools like SparkUp and Haml which do very similar things (though with a slightly different syntax). However, Zen Coding offers some nice plugins for popular text editors that SparkUp lacks, and Zen Coding isn’t language-specific like Haml (which is primarily of use to Ruby on Rails developers).

Under the hood, Zen Coding accomplishes two things. First, it expands abbreviations written the form of CSS selectors, and second, it’s able to match tag pairs so it correctly closes your tags.

Consider this somewhat more sophisticated bit of code:

html:xt>div#header>h1#logo+ul#nav>li.item-$*5>a

A mere single line of code. When run through Zen Coding’s expander and tag matching tools, it becomes a basic HTML page:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

   <title></title>

   <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />

</head>

<body>

   <div id="header">

       <h1 id="logo"></h1>

       <ul id="nav">

           <li class="item-1"><a href=""></a></li>

           <li class="item-2"><a href=""></a></li>

           <li class="item-3"><a href=""></a></li>

           <li class="item-4"><a href=""></a></li>

           <li class="item-5"><a href=""></a></li>

       </ul>

   </div>

</body>

</html>

The syntax is a little more complex than simple CSS selectors. For instance, the item-$*5 bit in the example above is used to generate five <li> tags, but it won’t take long to commit the few quirks to memory.

The easiest way to wrap your head around the power of Zen Coding is to watch the demo movie that Chikuyonok put together.

A new way of writing HTML code using CSS-like selector syntax

Our only real gripes with Zen Coding are that it lacks HTML5 support and insists on XHTML syntax. However, since HTML5 isn’t a standard recommendation and there are only a handful of tags where the difference between XHTML and HTML is important, we’re willing to overlook those deficiencies.

If you’d like to give Zen coding a try, there’s a sample online editor available, just use ctrl+, to expand your selectors. If you like Zen Coding’s approach, there are a few plugins available for text editors. Head over to Smashing Magazine and grab a plugin for Aptana (cross-platform), Coda (Mac), Espresso (Mac) or Emacs (cross-platform). The abbreviation expanding tools also work in plugins for TextMate, TopStyle, Sublime, GEdit and the editArea online editor.

See Also: