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:
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 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:
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:
- 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 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.
Visual Studio Code: End-to-End Editing and Debugging Tools for Web Developers
Your First Year in Code
HTML5 Games: Novice to Ninja