Applications and Tools

Turbo-Charge Your CSS With Emmet


Most articles and tutorials on Emmet cover its handling of HTML, but today we're going to focus on Emmet with CSS. Ready to turbo-charge your CSS writing? Let's go!

Note: It is recommended that you have a reasonable understanding of CSS before following along.

What is Emmet?

Emmet is a collection of abbreviations that expand into html/xml/css, taking the idea of text snippets further. Visit the download page and install Emmet for your editor of choice.

When working with Emmet, type in the appropriate abbreviation and hit the action key. In Sublime Text this is the TAB key. The syntax of the file you are working on will determine which abbreviations to use.

Why Use Emmet?

Emmet uses common sense abbreviations to make code writing easier. It can help a little or a lot, depending on the amount of time you invest in learning the ins and outs.

Emmet (previously known as Zen Coding) is a web-developer’s toolkit that can greatly improve your HTML & CSS workflow.

Not only does it save you time, but it makes writing code fun. There's just something about typing a few characters and watching them magically expand into perfectly formatted code! If you get something wrong, the undo button reverses the expanded code back to the abbreviation for you to edit and expand again.

I have also found that Emmet helps me remember code easier. Abbreviations are simply easier to memorize. text-transform: becomes "tt" and text-align:justify; becomes "taj". See how helpful this can be? You'll begin to learn new CSS properties and only have to memorize the abbreviations. You needn't even worry about semicolons and spaces, Emmet does that stuff for you!

Emmet and CSS

Let's look at the basic components of Emmet’s CSS abbreviations and how they speed up workflow.


CSS gives values to properties, like font-size, margin, padding, etc.

Taken from The Best Way to Learn CSS

Emmet has defined every known CSS property with an abbreviation. So border-bottom is bdb, border-top is bdt. Below is an example of font-size, which is fz.

Having typed the abbreviation, hit the action key (in my case, TAB) and Emmet will magically output the abbreviation into valid CSS, placing the cursor where you need it.

Properties Example


Now that we understand the properties, it’s time to add a value. This is done by typing the abbreviation in combination with the value needed. For example, fz18 will output to font-size: 18px;. You don't need to type "px" because Emmet will add that by default. If an item does not have a unit (like font-weight), Emmet is smart enough to know not to add the px.

Values Example


What if you don’t always use pixels? The units em, rem, %, ex, and px are all available in Emmet. Each unit (though this might seem a little extreme) also has an abbreviated form:

  • px → default
  • p%
  • eem
  • rrem
  • xex

To use a unit, just append the unit’s abbreviation at the end of your value. The example below is defining a font size with em

Units Example

Multiple Units

Some properties, like margin, allow for multiple values. To do this with Emmet, separate each value with a dash (-). Take a look at the example below for defining four values for the body’s margin.

Multiple Units Example


Emmet asks for you to prepend # instead of appending it to your value. So the # goes after your property, but before your value. A different number of characters outputs different hexadecimal codes. Take a look at some examples:

  • #1#111111
  • #e0#e0e0e0
  • #fc0#ffcc00

Here is an example of defining the body color as #111 (c#1):

Colors Example


Even though the !important tag should not be used very often, Emmet offers it just incase. Add an exclamation point ! to your abbreviation like so:

Important Example

Multiple Properties

Now that we have a basic understanding of Emmet’s CSS functions, it’s time to start putting them together. In a similar fashion to the HTML functions, you will add a plus sign (+) for each item. Remember, if you mess something up, you can always hit undo and revise the string.

Write all of your required properties and values, separating each with a + and then hit the action key to see the result.

Here is an example of defining different margins and paddings for the body.

Multiple Properties Example


Remember, you can use all of these abbreviations together or separately. It’s not about getting the Emmet codes exactly right the first time, it’s just about making it easier to write your CSS. To wrap up these cool animated GIFs, here is a quick demo of styling creating a div with a class of panel.

Panel Example


Emmet is a powerful tool. Claimed by some as a “high-speed” coding tool, it allows you spend less time writing the same things over and over without having to manually create your own snippets. Emmet was inspired by CSS selectors and can be used in all major text editors to fit any developer's workflow.

Remember, any new tool you add to your workflow will have a learning curve, but don’t take more time than you need figuring out how it works for you. Regularly visiting the documentation is a great refresher, and Emmet provides a cheat sheet with all of the possible functions. This has been built to help you think less, and write more code!

Useful Links

How do you use Emmet in your workflow? What is your favorite CSS function? Let us know in the comments!

Related Posts
  • Web Design
    A Simple Mixin Alternative to Standard CSS GridsMixin grid retina
    Over the past few years CSS grid systems have become a very popular way of rapidly producing layout scaffolding in web design. They can be a fantastic time-saving resource, with talented coders having intelligently crafted systems which cater to a wide array of possible layouts designers might need to create. However, this isn't the only way to approach grid-based web layouts, and today we're going to examine an alternative.Read More…
  • Code
    HTML & CSS
    AbsurdJS or Why I Wrote My Own CSS PreprocessorAbsurd 400
    As a front-end developer, I'm writing a lot of CSS and using pure CSS is not the most efficient way nowadays. CSS preprocessors are something which have helped me a lot. My first impression was that I finally found the perfect tool. These have a bunch of features, great support, free resources and so on. This is all true and it still applies, but after several projects, I realized that the world is not so perfect. There are two main CSS preprocessors - LESS and SASS. There are some others, but I have experience with only these two. In the first part of this article I'll share with you what I don't like about preprocessors and then in the second part I'll show you how I managed to solve most of the problems that I had.Read More…
  • Web Design
    Foundation's Sassy Styles ExplainedFoundation sass retina1
    In this tutorial we'll cover what can be done with the flexible Sass styles included in the Foundation framework. A lot of these offer a more customisable feature set than that of the CSS version, plus there are shortcuts which can be used to style items such as the top bar quickly and easily.Read More…
  • Web Design
    Styling Our Ghost Theme With LESSGhost less retina
    Welcome to the fourth part of our Ghost theme design tutorial series. In the introductory tutorial, you learned that there are two stages to designing a theme. During the instalments therefater we began and completed what we've referred to as "the first stage" of creating your theme's templates. This fourth part of our series takes us into the next stage of theme design, namely styling.Read More…
  • Web Design
    A Web Designer's Typographic BoilerplateB
    I like to use a typography.css in my projects; a separate file which houses all the basic structural typographic styles I'll need. A lot of what's found within it is obvious stuff (heading sizes, for example) but it also contains less obvious things which I don't want to forget. Let's work our way through the checklist..Read More…
  • Web Design
    Taking Ems Even FurtherEven more ems retina
    I recently wrote about ems; what they are, how they're used and some bits and pieces to bear in mind when you implement them yourself. I only scratched the surface though, and the comments thread threw up twice as many questions as the article answered! In this follow-up I'll take things further, looking at ems in even more detail.Read More…