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:
… it gets magically expanded into
<div class="logo"></div>
<ul id="navigation">
<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>
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:
and this would be transformed into
<div id="i2-test" class="item2"></div>
<div id="i3-test" class="item3"></div>
Zen Coding officially supports a majority of popular coding editors such as
- Aptana/Eclipse (cross-platform)
- TextMate (Mac)
- Coda (Mac)
- Espresso (Mac)
- Komodo Edit/IDE (cross-platform)
- Notepad++ (Windows)
- PSPad (Windows)
Support through third-party plug-ins are available for
- Dreamweaver (Windows, Mac)
- Sublime Text (Windows)
- UltraEdit (Windows)
- TopStyle (Windows)
- GEdit (crossplatform)
- BBEdit/TextWrangler (Mac)
- Visual Studio (Windows)
Be the first to comment