6 Awesome Emmet CSS Time-Saving Tips
Emmet is one of the most useful text editor plugins that you’ll ever come across for developers. It has the seemingly magic ability to turn a tiny bit of work into a ton of code, which can save you an incredible amount of time and effort in the long run.
Previously, we took a look at some of the best features of Emmet from an HTML perspective, today we’re going to follow that up with some tips for how Emmet can improve your CSS workflow.
2 Million+ Digital Assets, With Unlimited Downloads
Get unlimited downloads of 2 million+ design resources, themes, templates, photos, graphics and more. Envato Elements starts at $16 per month, and is the best creative subscription we've ever seen.
1. Intuitive Abbreviations
Working with Emmet in HTML is pretty straightforward. After you learn a few key concepts, you can pretty much run with it on your own. With CSS though, there are literally hundreds of snippets to memorize. It’s great to have so much functionality, but how can you possibly take it all in?
The good news is that Emmet uses abbreviations that are completely intuitive. In fact, in most cases, the first abbreviation you think to try turns out to be correct. Here are two examples:
As you can see, text-align is shortened to ta and border-width is shortened to bdw. Many abbreviations are even triggered by a single character. For instance, z expands to z-index.
2. Add Values
You can do a lot more with Emmet than expand abbreviations into properties. For instance, you can easily toss a value into your abbreviation using the colon syntax.
Here, :10 expanded to 10px and a expanded to auto. You can also specify your units with this method by simply tossing them in at the end. Note that p is a nice shortcut for %.
3. Fuzzy Search
The single best feature of Emmet from a CSS perspective is called “fuzzy search”. What this means is that you don’t actually have to know the proper abbreviation to get to the expansion that you’re looking for. You can literally make crap up, and in most cases, Emmet is smart enough to figure out what it is that you’re trying to achieve.
Fuzzy search greatly increases the usefulness of Emmet for writing CSS. It allows you pretty much ditch the standard syntax in favor of whatever you like best. For instance, I rarely use a colon to add in a value and instead type something like m10, which expands into margin: 10px.
4. Use + for Extras
With HTML, the “+” symbol is used for sibling relationships, but in CSS we see it being used differently. Here we add + to indicate that we want Emmet to include any extra options included in the abbreviation. We see this a lot when there is a shorthand version of a given set of properties.
Here you can see that if we simply expand f, we get font-size with no extras. However, when we throw in the “+”, we get a template for the font shorthand. Next, we see this same idea in action with the border shorthand.
You can use the plus symbol with background images, @font-face, text-outline, text-shadow and more.
5. Vendor Prefixes
Hate typing out all those annoying vendor prefixes? Me too. Fortunately, Emmet has you covered. Type out a CSS property with a hyphen before it and it’ll automatically be expanded to include all of the relevant prefixes.
You can perform this action on almost anything you want. For instance, if you type out “-designshack”, it will be expanded into -webkit-designshack, -moz-designshack, etc.
6. Gradients
Gradient syntax sucks, we all know it. It has changed and evolved too many times to count, it’s been through every possible combination of overly complex and simple, and you not only have to account for all of the prefixes, but also at least two different iterations of the -webkit version.
Once again, Emmet swoops in to save the day. You can save yourself a lot of typing by using Emmet’s unique shorthand gradient syntax, which will expand into the huge chunk of code that you need. You can read more about this and try it out here.
Try Them Out!
Now that you know a bunch of great CSS tricks to try out with Emmet, it’s time to give them a shot. Hit up our Emmet demo page and try out a few of the abbreviations that we went over above. Also be sure to hit up the Emmet home page, where you can learn more and try it for yourself right away.
How Do I Expand Abbreviations?
Expansion can be different in each editor and typically requires a plugin. In Sublime Text 2, open Package Manager, search for Emmet, install it, then restart the app. To trigger an expansion, simply hit tab after typing in an abbreviation.
Share Your Favorite Emmet CSS Macros
That’s my personal list of favorite Emmet CSS features, now it’s time for you to jump into the conversation and share yours. Leave a comment below and list the CSS features that you turn to the most in Emmet.