Boost Your HTML & CSS Workflow with Emmet
As web developers, we’re constantly searching for tools to enhance our workflow and productivity. This post is dedicated to web developers who frequently work with HTML and CSS. Today, we’re exploring a tool that allows us to write these two essential web languages much faster – Emmet.
Emmet is an extension of Zen Coding, written purely in JavaScript. While this demonstration uses 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’re using Sublime Text, like I am, Emmet can be easily installed through Package Control.
Once installed, you may need to restart Sublime Text.
Writing HTML with Emmet
Many modern editors offer similar built-in functionality. For example, in Sublime Text, simply writing <ul> and hitting the Tab key automatically expands it into a complete unordered list with <li> elements.
You can also use Emmet to write div.class to assign an HTML class to an element.
Emmet extends this functionality further, allowing you to write complex HTML structures more simply using abbreviations or aliases, similar to CSS. If you’re familiar with CSS syntax, you’ll adapt to Emmet quickly.
The Emmet documentation provides a comprehensive list of abbreviations and aliases, which can be overwhelming for first-time users. Here are some basic concepts that are essential to get you started:
Child Elements
Emmet uses syntax similar to CSS. For instance, in CSS, a direct child selector is represented by the > sign. In Emmet, this operator is also used to add child elements. For example:
Sibling Elements
Sibling elements are at the same nesting level. In CSS, the plus + sign is used to select sibling elements, and you can use it similarly in Emmet to add sibling elements.
Assigning ID or Class
In CSS, you can select an element by its id attribute using the # sign. With Emmet, # is used to assign an ID attribute to an element. As shown earlier, you can also assign an HTML class in the same way. For example:
When no element is specified, Emmet defaults to <div>. To be more specific, declare the element type before the class or ID name, like so:
You can assign multiple classes to one element as follows:
Assigning Attributes
In CSS, square brackets are used to select attributes. This method can also be applied in Emmet to assign attributes to generated elements.
Multiplication
Emmet allows you to add multiple HTML elements using the asterisk (*) sign, which can be a time-saver. For example, you can add an <h3> and four <h4> elements under a <section> element:
Basic HTML Document
You can build the basic structure of an HTML document in no time with Emmet. Here’s how to create a basic HTML5 structure:
Lorem Ipsum
One of my favorite features of Emmet is generating Lorem Ipsum text. Sublime Text has a shortcut for generating this dummy text; simply write lorem and hit Tab, and it expands into 5 to 7 lines of Lorem Ipsum.
Emmet takes this further, allowing you to specify the number of words. For example, to generate only three words, you can write lorem3:
You can specify the length of your Lorem Ipsum text accordingly.
Using Emmet in CSS
You can also use Emmet to write CSS. Similar to HTML, it expands aliases into complete CSS properties and their values. For example, to add padding with a value of 10px, write p:10 and hit the Tab key. Emmet will automatically expand it to padding: 10px:
To hide elements, you can use either the visibility or display property. With Emmet, you can write these properties as follows:
However, despite its advantages, I still prefer using the auto-complete feature in my code editor for CSS, as it’s more convenient. Plus, memorizing these CSS aliases is a bit harder than for HTML. You can refer to the cheatsheet for Emmet aliases in CSS as well as HTML here.
Conclusion
Emmet is a brilliant tool and an essential one for web developers. The only downside is the learning curve for first-timers, but once you master it, it can significantly boost your productivity. You’ll be writing HTML and CSS faster than ever before.
Have you tried Emmet? Share your thoughts in the comments below.