Emmet is a tool that allows you to quickly generate HTML and CSS code by using abbreviations and expanding them into full code.
It is built into many popular code editors, including Visual Studio Code, Sublime Text and Atom.
Today, let's take a look at how to use Emmet to boost your web development speed. I'll use VSCode as my editor, but feel free to pick up your favorite. You'll need to check out editor-specific docs of Emmet for the configuration part of the post if you choose something other than VSCode, but that should not be a problem for you to follow along.
Table of Contents
Example Usage for HTML
The best part of coding HTML involves writing (deeply) nested structures with attributes such as classes and ids attached to tags. Emmet can help us generating highly complicated HTML structures with a single line of code.
To achieve that, Emmet use concise syntax to represent:
- Relationships between tags
- Attributes attached to tags
- Repeating snippets
Represent relationships
One of the most common use cases of Emmet is to generate HTML tag hierarchy. Here is a quick example:
We use > to represent parent-child relationship in Emmet. To represent sibling-sibling relationship, we use +:
We can even climb up from current level to upper level using ^:
Here, we generated a p with two spans inside and a ul at the same level as the p.
Please note we can also achieve the same result by using grouping:
We grouped the p and its children in a pair of parentheses and replaced climb-up mark (^) with sibling mark (+) for ul (it seems same structure can still be correctly generated even if you don't replace ^ with + here, but for semantic reasons, I think + is more appropriate in this case).
Represent attributes
HTML tags usually have attributes such as classes and ids. In Emmet, we use .classname and #id to represent classes and ids respectively:
It's as easy as that. For abbrevations for other attributes, check out the official Emmet cheat sheet.
Represent Repeating Snippets
Repeating structures usually take the most time to write and fortunately with Emmet, such snippets cannot be generated more easily:
To generate auto-incrementing ids, for example, we can combine asterisk with $ (dollar sign):
Here is a more advanced example demonstrating auto-incrementing ids along with auto-incrementing text:
Example Usage for CSS
Emmet makes coding with CSS just as easy as HTML. Each CSS rule has corresponding abbreviations and once you understand the patterns of abbreviations, you don't need to remember them:
Please note that,
- I wrote
db, for example, instead ofd:bas the cheat sheet suggests. It seems either way works, although it's not clear why. So choose the convention that suits you best. - While the cheat sheet does not mention, you can expand shorthand CSS rules, e.g.
margin: 10px autowithm10:aorm:10:aas I did in the screenshot above.
Advanced Configuration
While Emmet is available by default for common file types such as html, slim, css and sass, you'll need to manually enable it if you're working on a different file type where Emmet is not activated by default.
For example, Emmet is not enabled by default for Ruby on Rails view files with the .erb extension. If I want to write HTML code in these files, I can update the emmet.includeLanguages setting in my VSCode's settings.json file like this:
{
"emmet.includeLanguages": {
"erb": "html",
},
}
The key ("erb") on the left side is the target file type where I want Emmet to be available while the value ("html") is a file type that Emmet already supports. See VSCode docs on this for more information.
Conclusion
In this post, we took a quick look at some of the most common scenarios where Emmet can help us write HTML and CSS code times faster.
As I said, there's more Emmet can do for us than I demonstrated here. It has an amazing, super comprehensive cheat sheet which you can use as a reference.
Top comments (3)
My absolute favorite is chaining multiple containers with multiple children:
.parent*24>.child*12
creating, as you'd expect, 24 div class="parent", each with 12 children div=".child". This might seem like a strange and extreme example, but this is exactly the type of setup I would use for a 3D sphere.
A lot of times I'll just use Pug instead, since I often need some extra if-clauses for special cases - but I do rely on emmet for simple, quick prototyping.
Hi, Maciek. Thank you for commenting.
I think your example of generating a large number of tags with Emmet is actually very good because it's realistic. Although I don't myself work with 3D graphics, it's not hard to imagine cases where you need complex, nested code blocks.
While Emmet helps us write HTML code faster, it's not a templating language. So yes, as you mentioned, if you want to be more expressive, a templating language like pug or slim (which I use pretty often) should be a better option.
Never tried Slim, but Pug I absolutely love. Spheres are very polygon-heavy stuff - and with a preprocessor you need so little code to generate them. Consider this one:
codepen.io/MackFitz/pen/BaPNyLw
There are 288 faces (24x12), a lot of them assigned special classes - and still the code for the principial sphere is just 20+ lines (between lines 9 and 33). Not nearly as neat as emmet's oneliner for a basic barebones sphere, but still so nice.