Zen Coding


We can use zen coding to write large and tedious html markups in a faster yet very effective way.

Steps to use:

Step One: Download Zen Coding(From Microsoft) Extention from http://visualstudiogallery.msdn.microsoft.com/abd79254-b4f7-492d-95ae-d9fa38e0af48

Step Two: After the installation of the extension you will get a zen coding tab in your visual studio menu from where u can see the Expand Abbreviation.
Step Three: Start using zen coding:

Example 1=>
             Write div#myDiv>div.content+ul#navigation>li*5>a
             Press alt+z  (Expand Abbreviation) and the above  expression will be expanded into the following HTML markup:
             <div id=”myDiv”>
                  <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>
            In the zen coding expression
            # stands for id
            . stands for class
            > stands for adding a child element
            + for adding a adjacent html element
            *5 makes 5 li inside the ul
Example 2=>div>p{Is this a useful tip} expression will result into following markup:
            <p>Is this a useful tip</p>
               {} is used to give the text to a element like paragraph or span

Benefits: Zen coding is an optimal solution for high speed coding.
                   Easy to learn.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s