Mastering Emmet for Faster HTML and CSS Coding

Emmet

Emmet is a workflow standard built into almost every modern code editor (VS Code, Sublime, WebStorm).

If you are currently typing full HTML tags manually, you are working twice as hard as you need to. Emmet dramatically increases coding speed and productivity by allowing you to write shorthand code that expands into full HTML/CSS structures.

1. HTML Syntax

These are the keystrokes you will use 99% of the time. Type the abbreviation and hit Tab (or Enter, depending on your settings) to expand it.

Boilerplate & Tags

• ! → Generates a full HTML5 document structure.

• div → <div></div>

• link → <link rel="stylesheet" href=""> (Smart defaults)

• input → <input type="text">

Classes & IDs

Emmet uses CSS-style selectors to generate HTML.

• Classes (.): div.container → <div class="container"></div>

• IDs (#): form#login → <form id="login"></form>

• Chaining: button.btn.btn-primary#submit → Creates a button with both classes and the ID.

👉 Pro Tip (Implicit Tags): You often don't even need to type the tag name.

• .card → <div class="card"></div> (Default is div)

• em>.text → <em><span class="text"></span></em> (Emmet is smart enough to know span is the standard child of em)

• ul>.item → <ul><li class="item"></li></ul> (Emmet knows li belongs inside ul)

2. Structure & Hierarchy

Building complex layouts one tag at a time is slow. Use these operators to map out the tree structure in a single line.

3. Content, Attributes & Numbering

Don't just build empty tags; fill them with data as you go.

Adding Text & Attributes

• Content {}: h1{Hello World} → <h1>Hello World</h1>

• Attributes []: a[href=index.html target=_blank] → <a href="index.html" target="_blank"></a>

• Combined: a.btn{Click Me} → <a href="" class="btn">Click Me</a>

The Power of Numbering ($)

When multiplying elements, use $ to number them automatically.

• Basic Numbering: li.item$*3 → li.item1, li.item2, li.item3

• Padding: li.item$$*3 → 01, 02, 03

• Descending: li.item$@-*3 → 3, 2, 1

• Offset: li.item$@3*3 → Starts counting from 3 (3, 4, 5).

Lorem Ipsum Generator

Need dummy text? Don't copy-paste from a website.

• lorem → Generates a 30-word paragraph.

• lorem10 → Generates exactly 10 words.

• ul>li*3>lorem5 → Creates a list where each item has 5 random words.

4. CSS Superpowers

Emmet is just as powerful in CSS files. It uses "fuzzy search," so you don't need to remember exact abbreviations—just the first letters.

• w10 → width: 10px; (Defaults to pixels)

• w10% → width: 10%;

• m10-20 → margin: 10px 20px;

• p0 → padding: 0;

• pos → position: relative;

• bd+ → border: 1px solid #000; (The + usually adds common values like 1px solid).

• df → display: flex;

• aic → align-items: center;

• jcc → justify-content: center;

5. Advanced & Modern Workflows (Pro Tips)

These features are crucial for modern frameworks like React and everyday efficiency.

Wrap with Abbreviation

If you have existing code (or text) that you need to wrap in a tag, don't cut and paste.

1. Select the text/code.

2. Open Command Palette (Ctrl+Shift+P).

3. Type "Wrap with Abbreviation".

4. Enter your Emmet string (e.g., .wrapper>ul>li*).

5. Result: Your text is instantly wrapped inside the structure.

React & JSX Support

Standard Emmet expands . to class="", which throws errors in React. You can configure VS Code to use className automatically.

• Setup: In VS Code settings.json, add:

  JSON

    "emmet.includeLanguages": {
        "javascript": "javascriptreact"
    }
  

• Result: Typing .box inside a .js file now expands to <div className="box"></div>.

6. Authoring Custom Snippets: Syntax & Rules

To take full control of Emmet, you need to understand the syntax rules for your snippets.json file. Emmet 2.0 introduced strict formatting guidelines that differ from older versions.

The Basic Structure

Your snippets.json file is divided by language. Within each language, you use a single property called "snippets".

JSON

{
  "html": {
    "snippets": {
      "ull": "ul>li[id=${1} class=${2}]*2{ Will work with html, pug, haml }",
      "oll": "<ol><li id=${1}> Will only work in html files </ol>",
      "text": "{ Wrap plain text in curly braces }"
    }
  },
  "css": {
    "snippets": {
      "cb": "color: black",
      "bsd": "border: 1px solid ${1:red}",
      "ls": "list-style: ${1}"
    }
  }
}

The 4 Golden Rules of Custom Snippets

If your snippets aren't working, you are likely breaking one of these four rules regarding syntax and punctuation.

1. Cursor & Tab Stops (TextMate Syntax)

Old versions of Emmet used | or ${cursor} to mark where your mouse lands. These are deprecated.

• Do: Use ${1}, ${2}, etc.

• Do: Use ${1:placeholder} if you want default text that can be overwritten.

• Don't: Use |.

2. CSS Punctuation: No Semicolons

When defining CSS snippets, never include the trailing semicolon ;.

• Why? Emmet is smart. It detects your file type. If you are in .css, it adds the semicolon. If you are in .sass or .stylus, it omits it.

• Correct: "cb": "color: black"

• Incorrect: "cb": "color: black;" (This will result in double semicolons).

3. CSS Naming: No Colons

Do not use colons (:) in your shortcut names (keys).

• Why? Emmet uses the colon to separate properties from values during fuzzy matching.

• Correct: "dn": "display: none"

• Incorrect: "d:n": "display: none"

4. HTML: Abbreviation vs. Raw Tag

You can define snippets using Emmet abbreviations or raw HTML.

• Abbreviation (ul>li): "Smart." It adapts to the file you are in. It generates <ul><li></li></ul> in HTML files, but ul > li in Pug files.

• Raw HTML (<ul>...): "Rigid." It will only render correctly in strict HTML files. It will break or look wrong in Pug/Haml/Slim.

Comparison: Old vs. New Emmet

Emmet is not just about typing fewer characters; it is about staying in the "flow state." Every time you stop to manually type <div class="...">, you break your mental focus on the component you are building. By offloading the repetitive syntax to Emmet, you free your brain to focus purely on the structure and logic of your application.

You do not need to memorize every shortcut in this guide today. Start small:

1. Commit to using . for classes and > for nesting.

2. Use ! for every new HTML file.

3. Try the "Wrap with Abbreviation" command the next time you need to refactor a block of code.

Once these basics become muscle memory, you will find yourself coding at the speed of thought.

"Give me six hours to chop down a tree and I will spend the first four sharpening the axe."
— Abraham Lincoln

To uncover more secrets about the invisible infrastructure powering your daily life, be sure to read my full series on The Internet.

Check out the full series: The Internet by Satpalsinh Rana

Resources

• Official Emmet Cheat Sheet: Bookmark this for the obscure syntax you might need once a month.

• VS Code Emmet Documentation: Deep dive into editor-specific customizations.