Barbaric Tip of the Week is a weekly series whose main purpose is to share tiny bits of knowledge that I find specially useful and interesting.

Web Essentials is an awesome Visual Studio Plugin that comes with a ton of goodies to help web developers build great websites. One of these goodies is a port of ZenCoding(now known as Emmet), a plugin in itself that helps you to write HTML and CSS in a super intuitive and fast way.

With Zen Coding you can use CSS selectors to generate a whole tree of html elements from a single line of code. For instance, let’s say that you want to create a list of items. You can type this snippet within Visual Studio:

ol>li*5

Press TAB and see how it expands into a complete HTML list:

<ol>
    <li></li>    
    <li></li>    
    <li></li>    
    <li></li>    
    <li></li>    
</ol>

And in that same spirit you can use any CSS selector and get the results that you would expect based on CSS selector semantics. For instance:

section.spell-book>article.spell*5>header>h1>a[name="spell-name-$"]{spell-name-$}

Would become:

<section class="spell-book">
    <article class="spell">
        <header>
            <h1><a href="" name="spell-name-1">spell-name-1</a></h1>
        </header>
    </article>
    <article class="spell">
        <header>
            <h1><a href="" name="spell-name-2">spell-name-2</a></h1>
        </header>
    </article>
    <article class="spell">
        <header>
            <h1><a href="" name="spell-name-3">spell-name-3</a></h1>
        </header>
    </article>
    <article class="spell">
        <header>
            <h1><a href="" name="spell-name-4">spell-name-4</a></h1>
        </header>
    </article>
    <article class="spell">
        <header>
            <h1><a href="" name="spell-name-5">spell-name-5</a></h1>
        </header>
    </article>
</section>

And you can even use custom elements if you are working with Web components, Angular, Aurelia or any other modern web framework:

magic-spell-book>magic-spell>header>h1>a[name="spell-name-$"]{spell-name-$}

Would become:

<magic-spell-book>
    <magic-spell>
        <header>
            <h1><a href="" name="spell-name-1">spell-name-1</a></h1>
        </header>
    </magic-spell>
</magic-spell-book>

Using ZenCoding (Emmet) With CSS

ZenCoding gives you a lot of help even when you are writing CSS in the form of style abbreviations. If you want to add some margins to a given class, you can use the following abbreviation:

m20-10

click on TAB and voilà:

margin: 20px 10px;

And there’s a ton more of CSS stuff ZenCoding can help you with:

// specify units
m50p
margin: 50%;
fz2e
font-size: 2em
// or colors
c#4
color: #444;
// and you have abbreviations for 
// pretty much every CSS property

And It Comes With a LoremIpsum Generator

How many times have you gone off to the web to find a lorem ipsum generator to add some fake content to your website as you go prototyping? Well, do that no more! ZenCoding also gives you a Lorem Ipsum generator that integrates perfectly with its HTML generation workflow. Just type:

article>p*2>lorem

And you’ll get all the lorem you need:

<article>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat laboriosam laudantium repellendus nihil quos ipsum vero eligendi dignissimos consequuntur praesentium quasi ullam aut omnis assumenda provident ratione repudiandae debitis soluta.</p>
    <p>Dolore eveniet tenetur eius consequatur reiciendis nisi et magnam praesentium in voluptatum. Incidunt vitae ipsam veniam tenetur corrupti itaque officiis temporibus perspiciatis aperiam ex et alias blanditiis minus harum fugiat.</p>
</article>

Start Learning ZenCoding (Emmet) With The CheatSheet

A very nice way to get started learning the different features available and CSS abbreviations that come with Emmet is to take a look at its Cheatsheet.

And it is Also Available For Other Editors!

Emmet is available, not only in Visual Studio with Web Essentials, but also in other editors that you know and love like Sublime, Atom, Brackets, TextMate, WebStorm, etc and even in online quick prototyping tools like jsFiddle, jsBin or codePen.

So go take a look at it if you haven’t already! Have a nice day!

P.S. Note that although I have used ZenCoding and Emmet almost interchangeably during the article, some features in Emmet are not available in ZenCoding. Particularly CSS abbreviations are not yet implemented in Web Essentials’ port of ZenCoding.