Zen Coding in Visual Studio 2012

http://www.johnpapa.net/zen-coding-in-visual-studio-2012

Zen Coding is a faster way to write HTML using a CSS style selector syntax, and you can now use Zen Coding in Visual Studio via the Web Essentials 2012 plug in (v1.7).  Zen Coding was introduced by Sergey Chikuyonok in 2009 (according to Smashing Magazine) and has been updated over time to become a great way to write monotonous HTML much more efficiently.

 

Special thanks  to Mads Kristensen and his team at Microsoft for adding Zen Coding to Visual Studio 2012 via Web Essentials 2012 (along with many other great features).

Quick Reference

Here is a quick list of the Zen Coding features that are now supported in Visual Studio 2012 via the Web Essentials 2012 plug in

• # creates an id attribute
• . creates a class attribute
• [ ] creates a custom attribute
• > creates a child element
• + creates a sibling element
• ^ climbs 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

What can you do? Here is an example:

1. <!-- Type this -->
2. ul[data-bind="foreach:customers"]>li*4>span{Caption $$}+input[type=text data-bind="value:$$"]
3. <!-- Creates this -->
4. <uldata-bind="foreach:customers">
5. <li><span>Caption 01</span><inputtype="text"value=""data-bind="value:01"/></li>
6. <li><span>Caption 02</span><inputtype="text"value=""data-bind="value:02"/></li>
7. <li><span>Caption 03</span><inputtype="text"value=""data-bind="value:03"/></li>
8. <li><span>Caption 04</span><inputtype="text"value=""data-bind="value:04"/></li>
9. </ul>

Let’s take a closer look at the different symbols used

ID and Class Attributes: # and .

You can create an element and assign it an id or class attribute using CSS style syntax.

1. <!-- Type this -->
2. div#contentRegion.address
3. <!-- Creates this -->
4. <divid="contentRegion"class="address"></div>

Custom Attributes: [ ]

You can create any attribute the square bracket syntax.

1. <!-- Type this -->
2. div[title]
3. <!-- Creates this -->
4. <divtitle=""></div>

Or create multiple attributes and fill in values

1. <!-- Type this -->
2. input[placeholder="Name" type="text"]
3. <!-- Creates this -->
4. <inputtype="text"value=""placeholder="Name"/>

Child Elements: >

Create an element and then a child element inside of it. In this example I create a div with the id=menu that contains a span with a class="item" and a blank title attribute

1. <!-- Type this -->
2. div#menu>span.item[title]
3. <!-- Creates this -->
4. <divid="menu">
5. <spanclass="item"title=""></span>
6. </div>

Sibling Elements: +

You can create a sibling element easily too.

1. <!-- Type this -->
2. footer>div>a+input
3. <!-- Creates this -->
4. <footer>
5. <div>
6. <ahref=""></a>
7. <inputtypevalue=""/>
8. </div>
9. </footer>

Climbing Elements: ^

The > operator descends into element hierarchy while the ^ climbs up the hierarchy. You can also climb multiple levels. For example: use 1 ^ to climb 1 level or use 4 ^ to climb 4 levels.

1. <!-- Type this -->
2. footer>div>a+input^^p
3. <!-- Creates this -->
4. <footer>
5. <div>
6. <ahref=""></a>
7. <inputtypevalue=""/>
8. </div>
9. <p></p>
10. </footer>

Multiplication: *

Create n number of elements

1. <!-- Type this -->
2. ul>li*4>span
3. <!-- Creates this -->
4. <ul>
5. <li><span></span></li>
6. <li><span></span></li>
7. <li><span></span></li>
8. <li><span></span></li>
9. </ul>

Item Numbering: $

When using the multiplication to create n number of elements, you can add an incremental number to them using the $. Notice that using multiple $ operators (ex: $$) creates pads the numbers with 0′s.

1. <!-- Type this -->
2. section>article.item$$*4
3. <!-- Creates this -->
4. <section>
5. <articleclass="item01"></article>
6. <articleclass="item02"></article>
7. <articleclass="item03"></article>
8. <articleclass="item04"></article>
9. </section>

Text: } {

You can enter text values inside of elements, without changing the parent context.

1. <!-- Type this -->
2. ul>li*4>span{Caption $$}
3. <!-- Creates this -->
4. <ul>
5. <li><span>Caption 01</span></li>
6. <li><span>Caption 02</span></li>
7. <li><span>Caption 03</span></li>
8. <li><span>Caption 04</span></li>
9. </ul>

This does not change the parent context, so when specifying the sibling to follow the text, the sibling element will actually follow the element prior to the text. That’s why the example below creates an anchor tag next to the span tag.

1. <!-- Type this -->
2. ul>li*4>span{Caption $$}+a{click me}
3. <!-- Creates this -->
4. <ul>
5. <li><span>Caption 01</span><ahref="">click me</a></li>
6. <li><span>Caption 02</span><ahref="">click me</a></li>
7. <li><span>Caption 03</span><ahref="">click me</a></li>
8. <li><span>Caption 04</span><ahref="">click me</a></li>
9. </ul>

Combining Them all

You can combine multiple features together which allows you to write some pretty cool HTML much faster. You can even use this to create some Knockout.js bindings for templates, and then just change the property names.

1. <!-- Type this -->
2. section[data-bind="foreach:customers"]>div*4>input[type="text" data-bind="text:$$"]
3. <!-- Creates this -->
4. <sectiondata-bind="foreach:customers">
5. <div>
6. <inputtype="text"value=""data-bind="text:01"/>
7. </div>
8. <div>
9. <inputtype="text"value=""data-bind="text:02"/>
10. </div>
11. <div>
12. <inputtype="text"value=""data-bind="text:03"/>
13. </div>
14. <div>
15. <inputtype="text"value=""data-bind="text:04"/>
16. </div>
17. </section>

Grouping: ( )

Grouping is a powerful feature of Zen Coding that allows you to create complex expressions. It is not yet in Web Essentials 2012, but I assume it will come in the near future. If it does arrive, you would be able to create entire sections of a DOM very easily.

1. <!-- Type this -->
2. div>(header>div)+section>(ul>li*2>a)+footer>(div>span)
3. <!-- WOULD create this (not yet supported in Web Essentials 2012)-->
4. <div>
5. <header>
6. <div></div>
7. </header>
8. <section>
9. <ul>
10. <li><ahref=""></a></li>
11. <li><ahref=""></a></li>
12. </ul>
13. </section>
14. <footer>
15. <div>
16. <span></span>
17. </div>
18. </footer>
19. </div>

As you can see, this would make it quite simple to create large sections of HTML with just a few keystrokes.

Lorem Ipsum Generator

(Added Dec 5, 2012)

You can now generate Lorem Ipsum directly in the HTML editor. Type “lorem” and hit TAB and a 30 word Lorem Ipsum text is inserted. Type “lorem10″ and a 10 word Lorem Ipsum text is inserted.

ul>li*5>lorem3

References

• Zen Coding page
• Follow Zen C0ding on twitter
• Introduction to  Zen Coding from Smashing Magazine in Nov 2009
• Web Essentials 2012 for Visual Studio 2012