3+ Reasons You Need to Use Emmet

The shortcut tool every front-end developer should be using

Photo by kyler trautner on Unsplash

When working with technology, let technology help you work.

Emmet, and no not the ant, is a toolkit/plugin for text editors originally created in 2008. Its purpose in life is simple, make writing code easier and faster. Primarily used for HTML and CSS to be able to write abbreviated code blocks, which get expanded out automatically for you.

Much like the idea of trying to memorize an entire programming language, trying to memorize all of Emmet would be a bit of a crazy task. Thankfully, they created this nifty cheat sheet to help you get started! While there is much to play around with, these are my favorite uses of Emmet:

1. New HTML documents — No one really enjoys having to write out all of that doctype and meta classes at the start of a plain HTML file. With Emmet, simply typing ! then hitting tab will create everything from the doctype tag, the head tag (including metadata tags), and even the body tag!
2. Quick page layouts — Laying out a new page often starts with a pretty simplistic base layer. If you want to get all of your core block elements down quick, Emmet has you covered! header>nav^main+aside+footer will get you a quick and easy page layout, ready for CSS Grid or Flexbox to build off of. > nests, ^ moves up a level, and + is for sibling tags!

header>nav^main+aside+footer shortcut in Emmet

3. Repetitive sections — Are you ever creating some content and have the same section over and over, even creating navigation menus are repetitive! When using Emmet, if you append *X after an abbreviation, replacing X with a number, it will generate that tag however many times listed! If you want to do that with entire sections of abbreviated tags, you can wrap them in parentheses. For a navigation menu using an unordered list, you could use something like so: nav>ul>(li>a[href="#" target="_blank"])*5 , and you will end up with five navigation items, with anchor tags having a # href and all set to open in a new page. Brackets [] are used to set attributes on any element.

nav>ul>(li>a[href="#" target="_blank"])*5

Now, these are three, relatively basic HTML examples showcasing what Emmet can do. A lot of speed and convenience can come from learning some of the CSS abbreviates as well, such as bgc turning into background-color: #fff. With some practice, you could be getting large chunks of your HTML and CSS done even before your coffee is finished brewing.

It may not try creating your programs for you like GitHub Copilot, but it is still an extremely powerful tool for any front-end developer. Paired with other tools such as CSS Grid, Flexbox CSS, and even SASS, you will be piecing together masterful websites in a fraction of the time.

Want more great programming tips? You can now sign up for a Medium Membership using my referral link to not only support me and other authors on the platform, but to make sure you have access to every article I, and many others, write!

Join Medium with my referral link - JP Branski