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”>
                  <div></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>
            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:
               <div>
            <p>Is this a useful tip</p>
               </div>
               {} 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.
Advertisements

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s