Hello everybody,

today I want to point to some useful features of ZenCoding in web essentials.

Quick reference of ZenCoding shortcuts:

    # use it for creating id
    . use it for creating a class attribute
    [ ] use it for creating a custom attribute
    > use it for creating a child element
    + use it for creating a sibling element
    ^ use it for creating climbing up
    * is element multiplication. This creates the same thing n number of times
    $ is replaced with an incremental number
    $$ is used for numbers with padding
    { } creates text in an element

So, if you decide to install in your Visual Studio Web essentials, then among options which you'll get will be ZenCoding. What does it give to you?

Consider following examples:

div#menu and press tab. Web essentials will convert div#menu into the following:

<div id="menu"></div> </body>

Cool? Yep.

Let's suppose you want something more complicated. For example you want to create inside of div span with class item. You can achieve it by typing:

div#menu>span.item

and press tab. You'll get following html result:

<div id="menu"> <span class="item"></span> </div>

Now assume you want even more complicated idea with some attribute. For this purpose you can use []. Consider following example:

div#menu>span.item[title]

<div id="menu"> <span class="item" title=""></span> </div>

And you'll be able to write anything in title.

If you not get tired here is another more deep example. Imagine you want to have menu item with five li inside of it and inside of li elements let's say you want to have links and text of each link will be "Click here 01", "Click here 02", etc.

You can do like this:

ul#menu>li.menuitem*5>a{Click here $$}

and after tab you'll see the following:

<ul id="menu"> <li class="menuitem"><a href="">Click here 01</a></li> <li class="menuitem"><a href="">Click here 02</a></li> <li class="menuitem"><a href="">Click here 03</a></li> <li class="menuitem"><a href="">Click here 04</a></li> <li class="menuitem"><a href="">Click here 05</a></li> </ul></p