Zen Coding – Speedy way to write HTML and CSS code

A typical CSS/HTML code for a page contains lots of redundant codes such as repeating DIV tags, A tags, attributes etc. You can minimize the amount of work by copy pasting most of these stuff, or if your code editor has auto-completion feature, but still you have to do a lot of typing.

Zen Coding is a set of plug-ins for popular code editors that will change the way you code. Zen Coding consists of two core components: an abbreviation expander which allows you to expand expressions similar to CSS-like selectors, and context-independent HTML-pair tag matcher. This allows you to write HTML, XML, XSL and any other structured code format in super high speed.

For example, if you write:

div#page>div.logo+ul#navigation>li*5>a

… it gets magically expanded into

Let’s look at another example. Suppose you want to generate three <div> elements with ids i1-test, i2-test and i3-test and item1, item2 and item3 classes. You can write this as:

div#i$-test.item$*5

and this would be transformed into