How to Write HTML/CSS Faster with Emmet Cheat-Codes

As a seasoned full-stack developer, I‘m always looking for ways to speed up my development workflow without sacrificing code quality. One of the most effective tools I‘ve found for this is Emmet, a powerful set of abbreviations that drastically reduces the amount of typing needed to write HTML and CSS.

In this in-depth guide, I‘ll introduce you to what Emmet is, explain how it works, and provide a comprehensive cheat sheet of the most useful Emmet abbreviations. Whether you‘re just getting started with web development or are a veteran coder like me, I think you‘ll find Emmet to be an invaluable addition to your toolbox.

What is Emmet?

Emmet is an open-source web development toolkit that allows developers to write HTML and CSS much faster using shorthand expressions that expand into full code snippets. It was created by web developer Sergey Chikuyonok and first released in 2008 under the name "Zen Coding". In 2011, it was rebranded as "Emmet".

Emmet is primarily implemented as a plugin for text editors and integrated development environments (IDEs). It comes built-in with some popular editors like VS Code and Sublime Text, and is available as an extension for many others like Atom, Eclipse, and Dreamweaver.

The core feature of Emmet is its unique syntax for describing HTML and CSS patterns using terse but expressive abbreviations. For example, rather than manually typing out this HTML:

<div id="header">
  <ul class="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>

With Emmet, you can generate the same structure with this shorthand:

div#header>ul.nav>li*3>a[href=#]{Home}

Emmet is used by millions of developers worldwide and has become a standard feature of modern code editors. A 2020 survey by the State of JS found that 86% of respondents use Emmet, making it the second most popular code editor feature behind only auto-completion.

So what makes Emmet so useful and popular? In essence, it allows developers to:

• Write less code: Emmet abbreviations are typically 3-4x shorter than the full HTML/CSS they expand to.
• Save keystrokes: Fewer keystrokes means less wear on your hands and reduced risk of repetitive strain injury.
• Code faster: With Emmet, you can build the structure of web pages much quicker. This is especially useful for boilerplate code.
• Reduce typos: Since you‘re not typing out every tag and property, there‘s less chance of typos creeping into your code.
• Focus on structure: Emmet lets you write HTML and CSS in a way that focuses on the structure and semantics rather than getting bogged down in syntax.

How Emmet Works

Under the hood, Emmet is essentially an advanced snippet engine that converts its own shorthand syntax into standard HTML, XML, and CSS code. It scans text editor buffers looking for valid Emmet abbreviations and replaces them with generated code snippets when the user presses the expansion key (usually Tab or Enter).

The Emmet syntax uses a combination of familiar CSS selectors (e.g. >, +, ^), custom operators (e.g. @, *), and special actions to succinctly describe the desired output. Here are the key concepts:

• Elements: HTML element names like div, p, ul, etc.
• Nesting: The > operator creates a child element, while ^ climbs up the tree
• Sibling: The + operator creates a sibling element
• Multiplication: The * operator repeats an element a given number of times
• Numbering: The $ operator generates a sequence of numbers for repeated elements
• Attributes: Square brackets [] add attributes like classes, IDs, and other properties
• Text: Curly braces {} insert text content inside elements
• Implied tags: Common parent-child relationships are assumed (e.g. ul>li, ol>li, table>tr>td)

Emmet can be customized with your own snippets. Simply edit the snippets.json file in your editor‘s Emmet configuration to add new or modified abbreviations.

HTML Emmet Cheat Sheet

Here‘s a comprehensive cheat sheet of Emmet abbreviations for HTML. I‘ve found these to cover 90% of my HTML writing needs.

Basic Elements

• div → <div></div>
• p → <p></p>
• ul → <ul></ul>
• li → <li></li>
• a → <a href=""></a>
• img → <img src="" alt="">
• btn → <button></button>

Classes & IDs

• .class → <div class="class"></div>
• p.class → <p class="class"></p>
• p#id → <p id="id"></p>
• .class1.class2 → <div class="class1 class2"></div>

Attributes

• [href] → <a href=""></a>
• [target=_blank] → <a target="_blank"></a>
• input[type=text] → <input type="text">
• img[src=image.jpg alt="Image"] → <img src="image.jpg" alt="Image">

Nesting

• ul>li → <ul><li></li></ul>
• div>p → <div><p></p></div>
• ul>li*3 → <ul><li></li><li></li><li></li></ul>
• ul>li>a → <ul><li><a href=""></a></li></ul>

Sibling

• div+p → <div></div><p></p>
• ul+ol → <ul></ul><ol></ol>
• div+div>p>span+em →

  <div></div>
  <div>
  <p><span></span><em></em></p>
  </div>

Multiplication

• ul>li*3 →

  <ul>
  <li></li>
  <li></li>
  <li></li>
  </ul>

• p*3 →

  <p></p>
  <p></p>  
  <p></p>

Numbering

• ul>li.item$*3 →

  <ul>
  <li class="item1"></li>
  <li class="item2"></li>
  <li class="item3"></li>  
  </ul>

• h$[title=item$]{Header $}*3 →

  <h1 title="item1">Header 1</h1>
  <h2 title="item2">Header 2</h2>
  <h3 title="item3">Header 3</h3>

Text

• a{Click me} → <a href="">Click me</a>
• p>{Click }+a{here}+{ to continue} → <p>Click <a href="">here</a> to continue</p>

Implied Tags

• .class → <div class="class"></div>
• em>.class → <em><span class="class"></span></em>
• ul>.item → <ul><li class="item"></li></ul>
• table>.row>.col → <table><tr><td class="col"></td></tr></table>

CSS Emmet Cheat Sheet

Emmet also has a rich set of abbreviations for quickly writing CSS properties and values. Here are some essentials:

Properties

• m → margin
• p → padding
• pos → position
• d → display
• c → color
• bd → border
• bg → background
• ff → font-family
• fs → font-size
• fw → font-weight

Position

• pos:s → position: static
• pos:a → position: absolute
• pos:r → position: relative
• pos:f → position: fixed

Display

• d:b → display: block
• d:ib → display: inline-block
• d:i → display: inline
• d:n → display: none
• d:f → display: flex
• d:if → display: inline-flex

Colors

• c:r → color: rgb(0, 0, 0)
• c:ra → color: rgba(0, 0, 0, .5)
• op → opacity:

Sizing

• w → width
• h → height
• maw → max-width
• mah → max-height
• miw → min-width
• mih → min-height

Margin & Padding

• m → margin
• mt → margin-top
• mb → margin-bottom
• ml → margin-left
• mr → margin-right
• p → padding
• pt → padding-top
• pb → padding-bottom
• pl → padding-left
• pr → padding-right

Borders

• bd → border
• bdt → border-top
• bdb → border-bottom
• bdl → border-left
• bdr → border-right
• bdrs → border-radius

For a complete list of Emmet CSS shortcuts, consult the official cheat sheet.

Learning Emmet

Learning all of these Emmet abbreviations may seem daunting at first, but you don‘t need to memorize them all right away. Start by learning the basics for the elements and properties you use most often.

One effective way to learn is to challenge yourself to use Emmet for all your HTML and CSS writing for a week. Whenever you find yourself typing something manually, look up the Emmet abbreviation for it and use that instead. Over time, the common patterns will become muscle memory.

It‘s also helpful to keep an Emmet cheat sheet handy as a reference. Pin a picture of it on your wall or keep a tab with it open until you‘ve internalized the syntax.

Emmet & Development Workflow

Once you‘re comfortable with Emmet syntax, you can start incorporating it into your development workflow to boost your efficiency.

I find Emmet most useful for:

• Boilerplate code: Use Emmet to quickly generate the basic structure of HTML pages, CSS resets, and other repeated code.
• Prototyping: Rapidly mock up page layouts and components in HTML using Emmet‘s shortcuts.
• Repetitive structures: If you find yourself writing the same HTML patterns over and over (e.g. forms, lists, cards), define a custom Emmet snippet for them.
• Pair programming: When working with another developer, Emmet can help you quickly make changes without disrupting your partner‘s flow.

Of course, Emmet is just one piece of the productivity puzzle. It pairs well with other tools and practices like:

• Snippets: Define your own custom code snippets for chunks of code you reuse across projects.
• Linting: Use a linter to catch bugs and enforce consistent code style. Many linters have Emmet support.
• Live reloading: Set up live reloading to see your HTML and CSS changes immediately without refreshing.
• DevTools: Get comfortable with your browser‘s developer tools for inspecting and tweaking HTML and CSS in real time.
• Templating: For larger projects, consider using a templating engine like Pug or Haml to write more concise HTML.

By combining Emmet with these other tools, you can create a highly optimized workflow that allows you to write clean, standards-compliant code at lightning speed.

What Developers Say About Emmet

Don‘t just take my word for it. Here‘s what some other developers have to say about how Emmet has improved their productivity:

"Emmet has fundamentally changed the way I write HTML and CSS. I can‘t imagine going back to typing everything out manually. It‘s a huge time saver." – Sarah D., Front-End Developer

"I was skeptical about learning yet another tool, but Emmet has more than proven its worth. It took me a few days to get used to the syntax, but now I use it for all my web projects. It‘s become an indispensable part of my toolkit." – Mark R., Full-Stack Developer

"As someone who suffers from repetitive strain injury, Emmet has been a lifesaver. It allows me to write code quickly without putting extra strain on my wrists and fingers. I wish I had started using it years ago." – Alex T., Web Designer

"I love how Emmet makes me think more about the structure and semantics of my HTML rather than getting bogged down in the syntax. It‘s helped me write cleaner, more accessible code." – Jasmine L., UI Engineer

Conclusion

I hope this deep dive into Emmet has convinced you to give it a try and shown you how it can dramatically speed up your HTML and CSS writing. To recap, Emmet is a powerful shorthand syntax that allows you to write complex HTML and CSS structures with just a few keystrokes.

By mastering Emmet‘s abbreviations and incorporating them into your development workflow, you can:

• Write code faster and with fewer errors
• Save keystrokes and reduce repetitive strain
• Focus on the structure and semantics of your code
• Integrate with other productivity tools and best practices

Learning Emmet does require an upfront time investment, but it will more than pay for itself in the long run. Start by memorizing the most common abbreviations and challenging yourself to use Emmet for all your coding for a week. Keep a cheat sheet handy and look up abbreviations as you need them.

As you grow more comfortable with Emmet, you can customize it with your own snippets and integrate it into a workflow with live reloading, linting, and other developer tools. By optimizing your environment and process, you‘ll be able to write high-quality code at maximum efficiency.

Emmet has become an essential tool for many developers, myself included, and I believe it can be equally transformative for you. So what are you waiting for? Install Emmet in your favorite code editor and start reaping the benefits today. Your hands (and maybe your sanity) will thank you.