As a web developer, we have always been searching for a tool to increase our workflow and productivity. And today’s post is dedicated for web developers who frequently work with HTML and CSS, as we are going to take a look at a tool that allows us to write these two essential web languages (much) faster – Emmet.
Emmet is the extending development of ZenCoding, which is written purely with JavaScript. While in this demonstration I’m going to use Sublime Text, Emmet is also available for many code editors including TextMate, Coda, Eclipse, Notepad++, and Adobe DreamWeaver.
Installing Emmet
Head over to this page to find and download Emmet for your code editor. If you are using Sublime Text, like I am, Emmet can be installed easily through Package Control.
Once installed, you may need to restart Sublime Text.
Writing HTML With Emmet
Most current editors probably have a similar built-in functionality. For example, in Sublime Text we simply write <ul> and hit the Tab key, it will automatically expand into a complete unordered list with the <li> element.
We can also write the following div.class to assign HTML class in the element.
Emmet, in this case, extends this functionality further, allowing us to write complex HTML structures in a more simplified way with abbreviations or aliases, similar to the one in CSS. So, if you are familiar with CSS syntax already, you should get used to it quickly.
In addition, Emmet documentation provides a massive list of abbreviations and aliases and the uses, which could be very intimidating for the first-timer. But, here are some of the basic things that I think you should know – at least.
Child Element
As we mentioned, Emmet uses syntax similar to CSS. In CSS we have a direct child selector which is represented with the > sign. In Emmet, we use this operator to add child elements as well. For example:
Sibling Element
Sibling refers to the element in the same nesting level. In CSS, we can select sibling element with the plus + sign. Similarly we can use it to add sibling elements with Emmet.
Assigning ID Or Class
We can select an element with its id attribute using the # sign in CSS. With Emmet, we use # to assign ID attribute to element, and as we have shown you before we can also assign an HTML class in the element, the same way we select the element class. For example:
When we do not specify the element, as you can see above, Emmet will use <div> as the default. If we want to be more specific, we can declare the element type before the class or the ID name, like so.
Specifically for the HTML class, we can assign multiple classes in one element in this way.
Assigning Attribute
In CSS, we use square bracket to select attribute. The same way can also be applied with Emmet for assigning attribute to the generated element.
Multiplication
Emmet also allows us to add HTML element in specific numbers using the asterisk (*) sign, which can be a time saver. In this example, we add an <h3> and four <h4> under a <section> element.
Basic HTML Document
We can build basic structure in an HTML document in a snap with Emmet. Given the example of basic HTML5 structure, we can do it this way.
Lorem Ipsum
Lastly, this is one of my favorites in Emmet. Sublime Text comes with a shortcut to generate thelorem ipsum dummy text. We simply write lorem and hit Tab, and it will expand to around 5 to 7 lines of lorem ipsum.
Emmet, in this case, works slightly different. With Emmet, we can specify how many words to generate. Say, we want only 3 words, we can write lorem3:
Specify how long you want your lorem ipsum text to be.
Using Emmet In CSS
We can also write CSS with Emmet. Similar to HTML, it extends the aliases into a complete CSS property as well as its value. Let me show you one example: say we want to add a padding with the value of 10px, we simply write p:10 and hit the Tab key, and it will automatically expand it topadding: 10px, as follows.
Or, if we want to hide elements, we can do either with visibility or display property. With Emmet, we can write these CSS properties this way.
However, despite the advantages, when it comes to CSS, I still prefer using the auto-complete feature from my code editor as it is simply more convenient for me. Plus, memorizing these CSS aliases is a bit harder than for HTML, although, you can refer to the cheatsheet of Emmet aliases for CSS as well as HTML here.
Conclusion
Emmet is really a brilliant tool, and I think it is an essential tool for web developers. The only downside perhaps is the learning curve required for first-timers, but once you pick it up, it can significantly boost your productivity. You can write HTML and CSS faster than ever before.
So, have you tried this tool? Share your thought in the comment section below.
