Emmet – The frontend development tool you can’t live without

Rickard DahlstromTech Stuff, Web Development5 Comments


Emmet is the developer tool you can’t live without.

That may sound like a big promise, I know, but that’s how much I love it.

The greatest power is the HTML part of Emmet, but this post will focus more on what it can do with CSS.


Emmet vs code snippets

This could be the confusing part. Why would I use Emmet when my code editor already provides me with good snippets?

Maybe you even have your own set of super spacey magical costume snippets with jet engines that you would offer your leg to keep. Well, that would be silly, we still need our legs even though we are developers. First of all, it’s not this or that, it’s this and that. With most code snippets you have to hard code, or it will only give you the property, not the value.

For example

This maybe seems like a small improvement, but for something you do a lot, it makes a big difference.

Useful Emmet rules

Maybe not surprisingly, but there are many CSS rules, so I won’t be able to write them all. I’ve collected the ones I use most.

After you have seen the following examples you might think “holy Batman”, that’s hard to remember. Don’t worry, you’ll pick it up quickly. Second of all, Emmet has a clever search function that will pick the closest rule. So the best way to learn is to experiment. I think these examples will give you a good idea of the structure.

Emmet and CSS is great but as I mentioned before, the fire of Emmet is the HTML part so please grab your sword and become a real ninja.

And remember, don’t forget your old snippets 😉

This helps you build better software, but do you know how it performs when in the hands of your users? For that you might want to consider something like this.

Next level software intelligence across your entire stack.

5 Comments on “Emmet – The frontend development tool you can’t live without”

  1. Pingback: Using Linters For Faster, Safer Coding With Less Javascript Errors | Raygun

  2. Pingback: Useful JavaScript debugging tips you didn't know

  3. Pingback: Use Linters For Safer Coding With Less Javascript Errors

  4. Pingback: Javascript debugging tips – Education Centre

  5. Pingback: Debug JavaScript With These 14 Tips - The Raygun Blog

Leave a Reply

Your email address will not be published. Required fields are marked *