If you’ve been writing HTML and CSS as a beginner or as an experienced developer, you will no doubt have encountered the arduous task of writing each character of an HTML element or CSS selector.
Don’t you wish there was a tool out there that could make writing it easier? Well look no further then the emmet package.
What is Emmet?
Emmet is a text editor plugin created by Sergey Chikuyonok to make writing front-end code a whole lot easier and faster. With Emmet you have the power to “expand simple abbreviations into complex code snippets,” create a single HTML document with one-line of code. Yes, one line….I know. But before I get into that let’s go over some of the features.
You can create a new document with just typing “!” or “doc”, then hitting the “Tab” key and you’ll see your doctype declaration come to life in front of your eyes.
Adding a Class, or Id
Emmet makes it easy for you to create elements with classes or ids. All you have to do is write the name of the tag you want to create, then a period if you want to give your tag a class name or a hashtag if you want to give it an id. Typing “div.container” would look like this:
“div#container” would output:
You can use square brackets to generate attributes inside your elements. So, “input[type=text]” will generate:
Let’s say you’ve built out a layout for your HTML document. However, you don’t have any copy to use as dummy text. Emmet gives you a simple way to populate your page with dummy text by typing “lorem” then hitting tab on your keyboard. You can also specify the length of what you want your copy to be. For example typing “lorem10” will give you a 10 word long copy of text.
This is a very powerful feature of Emmet, essentially allowing you to create an HTML structure with one line of code. All you need to do is type in the HTML elements of your choice with the greater than symbol between them and you can see the magic happen onscreen. The following line of code: header>nav>ul>li*4^^^main+aside+footer
Let’s break down what that line does. So the “>” symbol is establishing the parent-child relationship of each tag in relation to one another. The header is the parent of the nav tag and the nav tag is the child of the header tag, and the relationship cascades all the way down to the li tag.
Once we get to the li tag we specify how many instances of the tag we want by using multiplication or the “*” symbol. For example
div*4 will produce
When we reach this symbol “^” we are instructing the editor to bring us up a level in our hierarchy, because otherwise we would be writing elements that would become siblings of the li tag.
Once we climb up a few levels we can now write our sibling elements using the “+” sign. Main+aside+footer become sibling elements and finish off the end of our one line of code creating our HTML document.
Obviously this layout will need some CSS magic in order to transform it from a one column layout to a multi-column. But that’s just one example to get you started.
I mentioned that Emmet can autocomplete CSS properties as well. If you wanted to define a width in your CSS selector you can type “w150” and will generate:
In addition to pixels you may perform this action with other css units of measurement. For example, “m5em” gives you:
You may also set the background property of a selector by typing “bgc.” The default output will be
As developers we are lazy and writing code is tedious that is why Emmet is a great weapon in your front-end arsenal. It i supported by a wide variety of text editors such as Atom, Sublime text, Brackets, Coda, Aptana, as well as some online editing tools such as JSFiddle and CodePen.
If you’re feeling jaded by writing HTML and CSS then the Emmet plugin is the way to rekindle your love for mashing your keyboard as well as making you a more productive developer along the way.