By definition, Zen Coding is a set of plug-ins for text editors that allow for high-speed coding and editing in HTML, XML, XSL, and other structured code formats via content assist. The project was created by Sergey Chikuyonok in 2009 and continues to be actively developed by Chikuyonok and Zen Coding users.
The tools have been incorporated into a number of high-profile text editors, some plug-ins developed by the Zen Coding team and others implemented independently. However, Zen Coding is primarily independent from any text editor, as the engine works directly with text rather than with any particular software.
The convenience of development tools and acceleration of performing routine action, which sometimes distract from the coding process is the important factor in developer work. A lot of different code editors were created to handle these tasks. These editors contain a lot of necessary function such as auto supplement, code backlight, etc. Zen Coding is a plugin for code editors, which accelerates the code dialing.
<div id="name"></div>
When using Zen Coding, it is enough to dial such line:
div#name
After entering the appropriate combination, we will get the necessary HTML code.
Here is another example for quick creation of the list with references.
The code ul>li*3>a[href='#'] turns on :
<ul>
<li> <a href="#"> </ a> </ li>
<li> <a href="#"> </ a> </ li>
<li> <a href="#"> </ a> </ li>
</ ul>
To create the nested tag you should use symbol “>”
To create a new tag after previous use symbol “+”
Also, we can create an arbitrary number of elements, using the symbol of multiplication (*) after necessary element.
Here is the other example, that shows how quickly you can create the page template:
html:4t>header>div#logo+nav>ul>li.item-$*3>a
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional// EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
</head>
<body>
<header>
<div id="logo"></div>
<nav>
<ul>
<li class="item-1"><a href=""></a></li>
<li class="item-2"><a href=""></a></li>
<li class="item-3"><a href=""></a></li>
</ul>
</nav>
</header>
</body>
</html>
CSS also have its own abbreviation, for example:
d:b -> display:block;
ov:s -> overflow:scroll;
ti:- -> text-indent:-9999px;
fw:b -> font-weight:bold;
You may look thorough the full list of commands here
After using Zen coding dialing for just a while, you will become very efficient in your website development. :)
See also: Examples of multithreading
