Zen Coding is a method to code HTML at top speed through the use of CSS selectors and other abbreviations. This task will briefly cover the philosophy and use of the most common bundle items.
In order to expand a Zen Coding abbreviation or alias, you need to use the keyboard shortcut Command + E, or from the menu select Bundles | Zen Coding | Expand Abbreviation.
For example, div#main will expand to <div id="main"></div>
Here are some more examples:
On the Zen Coding website, at http://code.google.com/p/zen-coding/, Zen Coding is defined as an editor plugin for high-speed HTML, XML, and XSL (or any other structured code format) coding and editing. The core of this plugin is a powerful abbreviation engine, which allows you to expand expressions—similar to CSS selectors—into HTML code.
Zen Coding can greatly expedite HTML development. There are some other helpful actions included in this bundle:
The Increment/Decrement number by 1 action (Command + ?): Add or subtract 1 from the number to the left of the cursor. An example use case would be if you duplicate a line (Control + Shift + D) and then want to increase the ID by 1.
The Remove Tag action (Command + Shift + K): Remove the tag surrounding the text.
The Wrap with Abbreviation action (Command + Shift + A): Wrap current selection with the abbreviation you enter into the pop-up dialog after running this action.
There are more actions, so definitely explore all of them. A handy cheat sheet is available at http://code.google.com/p/zen-coding/wiki/CheatSheets.
The purpose of covering Zen Coding in this book is to highlight the power of TextMate as a full-featured coding tool. It will save you a lot of time if you do a lot of HTML and CSS coding.
To find out more information about Zen Coding, the philosophy, and more actions, you should visit the official website at http://code.google.com/p/zen-coding/. Listed at this website are a number of plugins available for other applications, should your friends and colleagues be jealous of your fast HTML coding abilities.
Along the same lines as Zen Coding for HTML, there is also Zen Coding for CSS, which mostly utilizes short-form abbreviations for CSS properties.
Find out more by going to this wiki page at http://code.google.com/p/zen-coding/wiki/ZenCSSPropertiesEn.