Emmet and CSS: The forgotten part

Rickard DahlstromTech Stuff, Web Development5 Comments



If you’re new to Emmet coding a.k.a Zen Coding I would recommend that you read my previous article Speed up your markup with Zen Coding / Emmet. It will give you a good introduction and a detailed walk through of the real power of Emmet. In short, 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 maybe 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 surprising 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, first of all you’ll get it quickly. Second of all, Emmet has a little 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.


I suggest that you have a look at the full list of rules at Emmet’s cheat sheet. Maybe you will find something you didn’t think of. Emmet and CSS is great but as I mentioned before, the fire of Emmet is the HTML part so please grab your sword, go to Speed up your markup with Zen Coding / Emmet and become a real ninja. And remember, don’t forget your old snippets 😉

We would absolutely recommend Raygun to any business which relies on healthy software to serve there customers. Andrew Schofield, Chief technology officer at Timely. Take a free 14 day trial. Request a short demo of Raygun.

5 Comments on “Emmet and CSS: The forgotten part”

  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 *