Faster Workflow: Mastering Emmet, Part 3

In this part of the Emmet series we will learn about syntax and function.

Emmet syntax and Functions

Emmet uses syntax similar to CSS selectors for describing element positions inside generated tree and element attributes. You can use element names like div or p to generate HTML tags.

Applying Classes and ids with . and #

. is used to add classes to elements and # is used to add ids. Here are some example for ids and classes. You can apply multiple ids and classes to any element.

Classes

--ADVERTISEMENT--

ul.nav.nav-main.nav-static

will generate

<ul class="nav nav-main nav-static"></ul>

Ids

header#site-header

will generate

<header id="site-header"></header>

As you can see in the above examples, I have applied multiple classes to the ul.

Child elements: >

> is used to to nest elements inside each other. You can use multiple times. It can be useful to create navigation menus and lists. See the code below i am going to create a nav menu with ul, list item and list item will be a link.

nav>ul>li>a

will generate the following nav menu. nav is a parent item, then we have ul as a child element and li with a tag as a grandchild.

<nav>
<ul>
<li>
<a href=""></a>
</li>
</ul>
</nav>

Sibling: +

The + sign is used to create sibling items. It is useful to create elements near each other, on the same level. The following abbreviation will generate three siblings.

header+.main+footer

will output

<header></header>
<div class="main"></div>
<footer></footer>

Climb up: ^

With > you can create elements inside each other. But if you want to climb one level up in the created HTML tree, you will have to use the ^ symbol. Let’s see an example of the same abbreviation with different + and ^ operators.

As you can see strong, blockquote and footer are nested inside the p paragraph tag, but we want to blockquote after p as a sibling element and footer as a different section. For this purpose we will have to use the ^ operator.

Multiplication: *

Multiplication is one of the very useful features in Emmet. With the * operator you can define how many times element should be outputted. It can be very helpful to create navigation menus with multiple list items.

nav>ul>li*5>a

will generate an unordered list with five list item. I have also used the a tag to make the list items clickable links. You can replace 5 with your desired number.

Item numbering: $

We can use the multiplication *operator to repeat elements, but with $ we can number them. Use the $ operator inside an element’s name, attribute’s name or attribute’s value to output the current number of the repeated element. It can be used to create lists with numbering. Let’s see some examples of how the $ operator works.

Custom attributes with square brackets: [ ]

Emmet can use [attr] notation (as in CSS) to add custom attributes to your elements, for example for a link. It is useful to add default values to elements. You can place as many attributes as you like inside square brackets [ ]. If you don’t specify attribute values Emmet will produce tab stops inside each empty attribute (if your editor supports them).

Text: {}

Adding default text to elements is simple, you can use curly braces {} with any element a, p, h1 to add custom text.

SimpelExample:

a{click here}

will output

<a href="">click here</a>

More Complex Example:

Here is one more complex example. If you type

p>{Click }+a{here}+{ to continue}

and hit Tab or Ctr+E to expand it, you will have the following markup.

<p>Click <a href="">here</a> to continue</p>

Dummy text with lorem ipsum

Web developers often use lorem ipsum text to add dummy data to their web pages, and to test how their HTML templates will look with real data. There are third party websites to generate lorem ipsum dummy text like http://www.lipsum.com/ and http://loremipsum.net/, but with Emmet you can generate lorem ipsum text on the fly.

Normally, lorem ipsum generates 30-word dummy text split into a few sentences, but with Emmet you can specify the number of words that should be generated right in the abbreviation.

CSS Abbreviations

Emmet has a special CSS resolver that expands such abbreviations into a complete CSS property. For CSS syntax, Emmet has a lot of predefined snippets for properties. Just like HTML, you can expand abbreviations into complete CSS properties.

Example 6: Adding a negative value will precede the first value with a hyphen and all the rest with double hyphens

p-10--20

will output following CSS code.

padding: -10px -20px;

Vendor Prefixes

Vendor prefixes are common nowadays to use CSS3 properties. Emmet makes it easy to use vendor prefixes. Moreover, in editors with tab stops support (such as Eclipse, Sublime Text 2, Espresso etc), Emmet will create a linked value placeholder so you can type a property value and it will be automatically placed in all generated properties.

If you need to output CSS properties with specified vendor prefixed properties only, you can do it with Emmet. Let’s say you need to output transform property with webkit and moz prefixes only. In this case you can expand the following abbreviation:

Example: Border Radius

-wm-trf

will output the following CSS code.

-webkit-transform: ;
-moz-transform: ;
transform: ;

CSS3 Gradients is a hard-to-write CSS3 feature, I cannot write it myself. I use an online CSS3 generator tools for CSS3 properties. Emmet makes it simple to write CSS3 gradients. Here’s what you need to type and the output you will get.

Tahir Taous is founder of Just Learn WordPress, a training site where you can learn how to create and manage websites with WordPress, WordPress essential training, theme development courses free video tutorials and articles.