You must know Zen Coding if you are Front End Web developer. Zen coding allows for fast coding and editing in HTML, XML, XSL, and other structured code formats. It uses CSS selectors like syntax and generate full code(write less do more). It expands abbreviations into complete HTML structures. Zen coding plugin is available for almost all top text editors(Notepad++, visual studio, Dreamweaver , TextMate, Sublime Text, Coda, Vim ..etc). In live demo, First write abbreviations and press Ctrl+, to expand abbreviations.
Syntax: Let's see basic rules
| Symbol | Description | Example | Output |
|---|---|---|---|
| tag | Element Name | div | |
| # | element identifier | div#myID | |
| . | Class name | div.myClass | |
| > | Child Element | ul>li | |
| + | Sibling element | div.Header+div.Content+div.Footer | |
| * | to create multiple elements | ul#menu>li*3>a | |
| $ | item numbers | div.item$*3 | |
| $$ | multi times numbering | div#id$.class$$*3 | |
1. As your default template:
For new page, no need to write full common structure like html, head, body tags etc. just type html:xt for xhtml1-transitional or html:5 for HTML5 structure. You can find other short syntax here. You can create your default template of page in zen coding syntax and use it again and again.
Example:
html:xt>div#header>div#logo+ul#nav>li.item-$*5>a
will generate following code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
</head>
<body>
<div id="header">
<div id="logo"></div>
<ul id="nav">
<li class="item-1"><a href=""></a></li>
<li class="item-2"><a href=""></a></li>
<li class="item-3"><a href=""></a></li>
<li class="item-4"><a href=""></a></li>
<li class="item-5"><a href=""></a></li>
</ul>
</div>
</body>
</html>
2. Create list/drop-down list Quickly:
"Wrap with Abbreviation" is power of zen coding. It does time consuming data formatting or repeated tasks quickly. Suppose you have to create country drop-down list from excel data. Copy country names from excel and paste in editor.
Now Ctrl + H and use
select#country>option#$*
Similarly, you can create menu/static list as in example of first point quickly.
3. Easy in social Sharing:
It's easy to share abbreviations instead of whole HTML template in social media, specially in twitter where char length is limited. When HTML template is shared, it gets distorted and very hard to understand. but in abbreviations, there is no role of formatting and easy for users also.
Zen coding has changed the way of writing HTML code and It's making me more lazy ;-) Share your opinion and tips about Zen coding.