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.

Properties

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

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.

Values

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.

Units

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 → %
e → em
r → rem
x → ex

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

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.

Colors

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):

!important

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:

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.

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.

Conclusion

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!