Using Emmet (in Sublime Text 3)

Posted by Ilija Eftimov on March 10, 2015

Front-end development is fun. Well, backend is fun too (especially with Ruby and Rails), but I feel like
front-end development is more rewarding. I mean, you type couple of lines of code and you can see the result of
your code immediately in your browser. It’s nice.

Although it’s cool, what frustrates me the most about front-end development is writing HTML.
I guess it’s just laziness, but I’d prefer if there was a more “programmatic” way of writing HTML.
All the angled-brackets and closing the tags frustrates me. One can argue that I should use HAML (and SASS). Well, I agree. But sometimes we don’t have the luxury of using preprocessors.

So, I found out about Emmet.
But, first things first, what is Emmet?
Emmet is a plugin for <enter-your-favourite-text-editor-here>.
It basically allows the developer to write HTML and CSS very fast!
Of course, once you get used to using it.

Problem is, I found out about it like two years ago, but I never gave it a try.
So last night, I finally gave it a try and oh boy, what a great surprise I got! Which lead to this:

I feel ashamed that today I finally tried it and found out that @emmetio is an awesome tool (knowing of it's existence for couple of years).

So, the > operator tells Emmet that the following element will be a child element of the element before the operator.
The + operator tells Emmet that the element that follows will be a sibling of the element before the operator.

What happens when we go way deep into the children elements and we need to go up to the parent element,
to create a sibling of the parent?

Again, easy!

Let’s create two lists, one next to another, wrapped in a div:

This can be easily achieved using groups. Just like in maths, or programming languages,
grouping of expressions are done using parentheses.

As you can see, now we have two groups which are literally the same. Wouldn’t it be
really cool if we can repeat the first group twice?

Classes and IDs

But hold on, lets see how we can add classes and ids to HTML elements using Emmet’s syntax.

You can add a class to an element by adding .class-name to the element and #id to add an id to it.
Easy as that.

Also, if you add an id or a class to a div, you can omit the div and just do .class-name or .id.
Emmet will know that you want to create a div with that class/id.

For example:

Multiplication

So, back to our earlier example - two lists wrapped in a div. But this time let’s write it using multiplication:

Really cool, right? The * operator is just like multiplication in maths - it repeats the
expression (in our example, the group) two times.

I know what you are thinking now - what’s the use of writing li+li+li three times when we can
use repetition to do this? Check this out:

BOOM! Much shorter.

We can combine multiplication and classes/ids in a very cool way.

When applying multiplication to a element or a group, the $ operator allows
us to apply the number of each multiplication in the class or id name.

For example:

Adding text and attributes to HTML elements

I think that an input field would be a great example for this.

<inputtype="text"placeholder="Enter your name"/>

The syntax for adding attributes to elements in Emmet is very simillar to the one CSS selectors use:

And adding content is done with appending { some content } to the element.