Faster Coding with Emmet in Dreamweaver CC

Faster Coding with Emmet in Dreamweaver CC
Adobe Products Featured

Even though I love Dreamweaver for its visual design capabilities and use them as much as I can, there are times when I hand code. It’s inevitable. And, inevitably, I get frustrated entering the same basic code for the upteenth time. How often can you create an unordered list for a nav bar and not go crazy with the repeated <li> elements? There’s gotta be a better, faster way to code.

Oh, right. There is Emmet. In Dreamweaver.

What the heck’s an Emmet?

Emmet is the latest incarnation of an on-going open source project by Russian coder, Sergey Chikuyonok. Started in 2009 as Zen Coding, Sergey’s work is focused on making the developer’s hand-written road a smoother one with a series of text editor enhancements, now collectively called the Emmet toolkit. Chief among these power tools is the HTML and CSS abbreviation expander, integrated in Dreamweaver CC 2015, and responsible for many smiles around the planet. Let’s take a look at what’s giving web coders, like me, all those wide grins.

First, a dirt-simple example of how Emmet works.

  1. In Code view, place your cursor in the <body> tag.
  2. On a blank line, enter the letter p.
  3. Press Tab.

Your single letter—an Emmet abbreviation—has been replaced with:

<p></p>
Not only has the code been expanded, but the cursor is also correctly positioned between opening and closing tag, awaiting your content. Emmet has expanded your two keystrokes into 11, if you count the back-arrow presses to move your insert pointer into place. That’s a 550% increase in efficiency. Smiling yet? Just wait.

This example is perhaps the simplest abbreviation (well, there is one even simpler that’s so cool I have to save it for a special treat at the end of this article), but the beauty of Emmet is even the most complex are easy to learn. Why? Because, if you know CSS, you already know the syntax. Emmet adopts CSS selector operators for its abbreviation engine to create structured code. Simple concept, powerful results.

Let’s say you want to create a <div> tag with a <p> within it. In DOM-speak, the paragraph tag is a child of the div. To represent this, use the CSS child selector, >, like this:

div>p
Press Tab to expand this abbreviation into:

<div>    
   <p></p>
</div>
Not only can you created any level of nesting with the child selector, the sibling operator (+) allows you to insert elements adjacently:

div>p+img
Converts to:

<div>    
   <p></p>    
   <img src="" alt="">
</div>
Of course, being CSS-based, you can easily throw classes and IDs into the mix:

div#header>div.row>div#main.col
Tab to expand this abbreviation to:

pic1

Note how you can specify IDs or classes separately or in tandem; multiple classes are acceptable as well.

Getting into the Emmet groove

While Emment is built on the CSS syntax foundation, it boasts a few innovative structures all its own. One of the sweetest is the multiplication operator, which, as you might expect, is the asterisk, *. With this enhancement, Emmet can output any number of a targeted element, like a <li> tag in an unordered or ordered list. This entry:

ul>li*5
Transforms to 5 list items within an unordered list, like this:

<ul>    
   <li></li>    
   <li></li>    
   <li></li>    
   <li></li>    
   <li></li>
</ul>
The multiplication operator has all kinds of uses, especially when combined with another Emmet enhancement, grouping. Any combination of elements can be grouped with parenthesis. For instance, let’s say you want to add an <a> tag to each of the list items in the above example. If you set up your abbreviation this way:

ul>li>a*5
You’d get this unusable block:

<ul>    
   <li>         
      <a href=""></a>         
      <a href=""></a>         
      <a href=""></a>         
      <a href=""></a>         
      <a href=""></a>    
   </li>
</ul>
But, if you group the list item and the anchor tag and then apply the multiplication operator to the group, you’ll get just what you need:

ul>(li>a)*5
Expanded:

Not only is your list all set up for links, check out how the cursor is automatically placed in the first attribute, ready for entry. Sheer coolness!

Another function found in Emmet that I wish was available in CSS selectors is the graphically-named climb-up operator, ^.  The climb-up operator is used to move from one DOM child level to the parent. Say I want to create a paragraph inside a div that contained a nested <em> tag—and then follow that by an <address> element on the same level as the <p> tag. Here’s how it’s done:

div>p>em^address
Tab once to output the following:

<div>    
   <p><em></em></p>    
   <address></address>
</div>
When coding HTML, Emmet supports any existing tag, including HTML5 variants, which makes syntactical structure a breeze. How about a <nav> section with an unordered list, followed by an <article> enclosing a <section> as well an <aside> and a <footer>? Here you go:

nav>ul>li*4>a^^^article>section^^aside+footer
Tab to presto-chango:

pic2This abbreviation incorporates multiple climb-up operators to bring the <article> and <aside> elements on the same DOM level as <nav> and <footer>. The same result could have been reached by judicious grouping—I’ll leave that exact formula as an exercise for you to figure out. Drop me a comment if you can’t and I’ll reveal all.

Making Emmet power moves

Hard to believe, but we’ve just begun to scratch the surface with Emmet. What I really appreciate is how this feature can take the sheer drudgery out of so many common coding tasks. For instance, how many times have you had to bring in some placeholder text in the design phase of building a web page? Countless, no doubt. Rather than create and apply a snippet or visit a bookmarked Lorem Ipsum online generator, you can use Emmet to add just the right amount of standardized content in all the right places.

The basic keyword is easy to remember: lorem. To generate one paragraph of placeholder text, place lorem as a child of a p abbreviation:

p>lorem
This will yield:

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti, fugit, explicabo, assumenda perspiciatis ea ipsa nam porro a quaerat quam error maiores hic adipisci unde nostrum! Deserunt possimus doloremque magni.</p>
By default, each lorem block is 30 words. You can, however, specify a different amount of text, just by putting the number after the keyword:

p>lorem100
Will yield:

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At, ab, repellendus, obcaecati dolorem eum quia atque recusandae dolores distinctio molestias cum velit vel soluta neque incidunt? Esse, iste, voluptatibus, perspiciatis, ab beatae delectus nihil placeat quia cum iure sit enim ipsam nemo accusamus dolorum distinctio impedit temporibus officiis magni dolor repellat dolorem animi nulla adipisci omnis ut suscipit a dicta qui sequi explicabo commodi minima error fugit ducimus ratione tempore in! Ab, placeat quaerat dolorum facilis iste ducimus provident numquam fugit nisi repudiandae perferendis error tempora commodi similique ullam culpa iusto illum distinctio repellat ex nulla accusantium rem hic saepe?</p>
Naturally, you can combine the lorem operator with any of the other Emmet functions for really rapid coding. Far faster than you could bring in 4 randomly generated text blocks, you could type this:

p*4>lorem
Then press Tab and you get:

pic4

Note that the multiplier is applied to the element containing the Lorem Ipsum text, not the lorem keyword.

Yet another task that I’m oh-so-happy to pass to Emmet is sequential numbering. Some designs call for incremented IDs or classes—item1, item2, item3—applied over-and-over again. Emmet transforms the “over-and-over” condition to “one-and-done” with an abbreviation like this:

ul>li#item$.item*5
Expand this line and you’ll see:

<ul>    
   <li id="item1" class="item"></li>    
   <li id="item2" class="item"></li>    
   <li id="item3" class="item"></li>    
   <li id="item4" class="item"></li>    
   <li id="item5" class="item"></li>
</ul>
Here, you can see the unique IDs paired with the generic class names—courtesy of Emmet.

One last power tip before we leave Emmet HTML. Dreamweaver has a handy button on the Coding toolbar to insert an HTML comment. It’s extremely useful, but sometimes, when you’re blazing along in code, you don’t want to reach for the mouse. With Emment, just type the letter c and press Tab. You’ll be rewarded with the essential comment set-up:

<!-- -->
Complete with cursor properly placed for you to comment away.

Expressive Emmet styling

So far, we’ve focused on the HTML side of Emmet, but there’s an equally powerful CSS aspect as well. When you trigger an Emmet abbreviation in a CSS style sheet or within a <style> tag, you expand the CSS properties and, in some cases, values. Rather than employ standard tag names, Emmet CSS abbreviations are, quite literally, abbreviations.

Let’s look at a simple example. To create a padding declaration, in a style sheet or <style> tag enter the letter p and press Tab. The result:

padding:  ;
Your cursor is placed just before the closing semi-colon, ready for you to input your values. There are similar short-cuts for entering each of the specific margin side:

Abbreviation Output
pt padding-top: ;
pr padding-right: ;
pb padding-bottom: ;
pl padding-left: ;
That’s not to say you can’t use Emmet to enter values. Entering p10 and pressing Tab will give you the following:

padding: 10px;
Additional values can be added if separated by a hyphen.

p20-0-20-15
Press Tab and Dreamweaver provides:

pic6

Emmet is capable of handling much more complex CSS as well. Let’s say you’ve decided to include some new web fonts with the @font-face property. Just enter @f and press Tab and before you can remember how to spell Helvetica Neue, you’ll have a basic declaration:

@font-face {    
   font-family:;    
   src:url();
}
The super-charged variation saves even more keystrokes. Ramp up your @font-face abbreviation by adding a plus sign: enter @f+ and a quick tap of the Tab key will return:

pic8

Not too shabby, right?

Concluding, Emmet-style

The incredible array of what’s possible in Emmet can certainly be overwhelming. Luckily, a cheat sheet covering both HTML and CSS abbreviations is online and yours for the stealing.

Buried deep within that page is one of my favorite Emmet transformations that I’ll leave you with, as promised. On a blank page, enter an exclamation mark— ! —and press Tab.

pic5

BAM! You’ve been Emmetized. Keep smiling and code faster with Emmet now in Dreamweaver CC.

Recommended Articles