Advertisement
Applications and Tools

Turbo-Charge Your CSS With Emmet

by

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.

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

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.

Values Example

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%
  • 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

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

Colors Example

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

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

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

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!

Related Posts
  • Web Design
    HTML/CSS
    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…
  • Web Design
    HTML/CSS
    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
    CMS
    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
    Typography
    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
    Typography
    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…
  • Web Design
    Typography
    Taking the "Erm.." Out of EmsDemystifying ems retina
    I'm going to make a sweeping statement; pixels have no place in web design. There's only one reason you're still relying on pixels – and that's because you haven't yet gotten the hang of ems. Let's change that!Read More…