Design Method

Using Emmet to Speed Up CSS

Please note – some knowledge of Emmet is recommended before you read this post. If you haven’t worked with, or heard of Emmet before, please check out this post first.

Emmet is not exclusively used to code HTML, it is a powerful preprocessor which can be used to create HTML & CSS & LESS.

There are three main features of Emmet when using it to create CSS & LESS

CSS Abbreviations
Vendor Prefixes
Gradients
Fuzzy Search

CSS Abbreveations

As you will have seen in my colleague’s tutorial, Emmet can be used to expand snippets into fully formatted markup language. Obviously there’s no way to abbreviate CSS selectors since they will most likely be custom to your design.

For CSS syntax, Emmet has a lot of predefined snippets for properties. For example, you can expand m abbreviation to get margin: ; snippet.

Emmet can greatly optimize your workflow here: you can inject value directly into abbreviation. To get margin: 10px; you can simply expand the m10 abbreviation. If you want to set multiple values for the margin property, you simply hypenate the margin property. For example m10-20-30-40 would become: margin: 10px 20px 30px 40px;

By default, Emmet will use pixels as the unit of measurement, however you can override this by setting whatever units of measurement you like.

Emmet has a few aliases for commonly used values:

p → %
e → em
x → ex

So you can specify different units of measurement within one property declaration. You’re not limited to the defauly units of measurement.

w100p → width: 100%
m10p30e5x → margin: 10% 30em 5ex

Emmet can also output colour values as seen below:

#1 → #111111
#e0 → #e0e0e0
#fc0 → #ffcc00

Vendor Prefixes

With the introduction of CSS3 came many features developers couldn’t wait to use, however with these features came a need to add vendor specific prefixes to ensure they could be understood by each different browser. For example border-radius:9px; would have to be written like the following to be interpretted correcly by all browsers: -webkit-border-radius:9px; -moz-border-radius:9px; -o-border-radius:9px; -ms-border-radius:9px;

Emmet has a very useful feature, by simply prefixing CSS properties with a hyphen, it will output the property with all of the vendor prefixes automatically. So -bdrs9 will output the following: -webkit-border-radius: 9px; -moz-border-radius: 9px; border-radius: 9px;

Gradients

Gradients are another feature of CSS3 which can be tricky to write. Firstly you have to write the property multiple times to account for differnt browsers, Emmet can take care of this for you. Here is an example of a gradient generated using Emmet. lg(left,#fc0,red) becomes

[css]background-image: -webkit-gradient(linear, 0 0, 100% 0, from(#fc0), to(red));
background-image: -webkit-linear-gradient(left, #fc0, red);
background-image: -moz-linear-gradient(left, #fc0, red);
background-image: -o-linear-gradient(left, #fc0, red);
background-image: linear-gradient(left, #fc0, red);[/css]

Fuzzy Search

Definitely my favourite of all the Emmet features, Fuzzy Search allows you to type expressions that vaugely resemble CSS properties, and it will output the correct, fully formatted property. There are far too many to remember, but the Emmet Cheat Sheet is your friend here.

If you just use your initiative, you’ll find it quite simple. For example, to write: line-height:20em; You would input lh20e

db Will become display:block;
tdn Will become text-decoration:none;
bxz Will become box-sizing:border-box;
bg+ Will become background:#fff url() 0 0 no-repeat;
fz Will become font-size:;