ZenCoding: Shorthand for HTML
Let’s face it, endlessly bashing out HTML is a pain. Even with the advent of automatic tag-closing in certain editors, I still spend far too much time typing tags and changing indentation so that it’s readable to me later on. This is why ZenCoding caught my eye. It’s shorthand for HTML, based on the CSS selector syntax.
Using Selectors
By using the common CSS selectors in a supporting editor, you can save yourself a lot of time. Here’s a quick list to refresh your memory:
| div | A regular div tag |
| div#div1 | Div tag with an id set to “div1″ |
| div.class1 | Div tag with class set to “class1″ |
| div>p | Div tag with a paragraph tag inside it |
| div+p | Div tag with a paragraph tag next to it |
These can of course be strung together to form complex HTML layouts using much less code. The editor will then expand it into beautifully laid out HTML. Let’s take a standard page layout:
<html> <head></head> <body> <div id="header"></div> <div id="content"></div> <div id="footer"></div> </body> </html>
Using the ZenCoding syntax, we can reduce that to the following snippet of code:
html>head+body>div#header+div#content+div#footer
A simple line of code in a syntax we’re all familiar with, which expands to create a whole starting page of markup.
Multipliers and Iterators
It doesn’t stop there though. One of the most annoying things about layouts is when you have multiple tags that are the same or similar. You’ve got the choice of typing each one out or copying and pasting, making changes as you go along. ZenCoding enhances the CSS syntax with the inclusion of a couple of special characters, * and $. Using *, followed by a number, will add that tag the same number of times. Using $ will add the index number of that tag. So, for example:
ul#menu>li.menuitem-$*5
This will expand into an unordered list with the ID “menu”, with five list items inside it. These list items will all have the class menuitem-$, where $ is the index of that list item within the list. Here’s the markup:
<ul id="menu"> <li class="menuitem-1"></li> <li class="menuitem-2"></li> <li class="menuitem-3"></li> <li class="menuitem-4"></li> <li class="menuitem-5"></li> </ul>
ZenCoding is open source software hosted at Google Code. There’s already a large number of supported editors including Dreamweaver, Aptana, Textmate and NetBean with more being added regularly.
No comments yet.