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
- Fuzzy Search
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
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 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.
[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]
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
background:#fff url() 0 0 no-repeat;
Hopefully this should have given you some insight into how Emmet can save you a lot of time! Be sure to check out the Emmet Cheat Sheet and try it out yourself.