Zen Coding and the Art of Rapid HTML Authoring, Page 2
Adding CSS IDs and Classes
As was demonstrated in the initial example, you can assign CSS IDs and classes when generating HTML by postfixing the element with a hashmark (#) or period (.) followed by the ID or class name, respectively. For instance, the following snippet will assign an ID of navigation to the
ul element, and a class name of
item to each list item:
Expanding this snippet produces the following output:
<ul id="navigation"> <li class="item"></li> <li class="item"></li> <li class="item"></li> </ul>
Zen Coding isn't limited to mere HTML expansion. In fact, thanks to filters you're able to perform all sorts of interesting post-processing tasks such as converting HTML into its corresponding HTML entities (which I've done throughout this article to render the HTML tags) by appending the
|e filter to the end of your Zen Coding syntax. Consider the following example:
Executing this example will produce the following output:
<ul> <li></li> <li></li> <li></li> </ul>
Numerous other filters are available, including those that support Haml conversion, the addition of HTML comments, CSS abbreviation expansion, and others.
Like jQuery and Blueprint, Zen Coding is one of those rare tools that offers web developers an immediate productivity boost. In just a few short weeks it has already become an indispensable part of my toolbox. What other developer tools do you use to boost your productivity? Tell us about them in the comments!
About the Author
Jason Gilmore is the founder of EasyPHPWebsites.com. He also is the author of several popular books, including "Easy PHP Websites with the Zend Framework", "Easy PayPal with PHP", and "Beginning PHP and MySQL, Third Edition".