I was doing my usual reading up this weekend and came across a fantastic post on Smashing Magazine’s blog by Sergey Chikuyonik regarding “Zen Coding”.

To quote:

In this post we present a new speedy way of writing HTML code using CSS-like selector syntax — a handy set of tools for high-speed HTML and CSS coding. It was developed by our author Sergey Chikuyonok and released for Smashing Magazine and its readers.

So, it’s shorthand HTML right?

True, but it’s far far more than that; it’s a way of integrating shorthand HTML with common CSS to generate actual code. One line of “Zen Coding”:

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

Produces a wealth of markup:

<!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”> <div id=”logo”></div> <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> </body> </html>

Seriously – that’s straight from the Zen Coding Demo Site where you can try it yourself.

Now I, for one, love this idea. I spend so much time knocking out HTML and CSS and think it’d be a god send to be able to implement something as slick as this. The only sticking point I can see is the potantially steep learning curve – the syntax isn’t too tough to grasp in the above example but from the post over at Smashing I can see it could get a little hairier.

I might just give this a shot when I get chance to sit down and pick at the code structure!

I’d love to hear your thoughts in the comments section, let me know what you think and how you get along with it if you’ve tried it.

Post to Twitter Post to Plurk Post to Yahoo Buzz Post to Delicious Post to Digg Post to MySpace Post to Reddit Post to StumbleUpon