# 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` → `
` * `link` → `` (Smart defaults) * `input` → `` ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1769625792072/dc1f73e2-8c0a-42fc-affc-dc18ae1cbe54.gif align="center") ### **Classes & IDs** Emmet uses CSS-style selectors to generate HTML. * **Classes (**`.`): `div.container` → `
` * **IDs (**`#`): `form#login` → `
` * **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` → `
` (Default is div) > > * `em>.text` → `` (Emmet is smart enough to know `span` is the standard child of `em`) > > * `ul>.item` → `` (Emmet knows `li` belongs inside `ul`) > ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1769701411757/0b6b6744-ea8c-4b9c-aa51-39e9f5fa74f3.gif align="center") ## 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. | **Operator** | **Function** | **Example** | **Result** | | --- | --- | --- | --- | | `>` | **Child** | `ul>li` | `` | | `+` | **Sibling** | `h1+p` | `

` | | `*` | **Multiply** | `li*3` | 3 list items: `
  • `... | | `^` | **Climb Up** | `div>p^span` | Puts the `span` next to `div`, not inside it. | | `()` | **Grouping** | `header>(nav>ul)+div` | Groups the nav/ul together so the div stays a sibling of nav. | ## 3\. Content, Attributes & Numbering Don't just build empty tags; fill them with data as you go. ### **Adding Text & Attributes** * **Content** `{}`: `h1{Hello World}` → `

    Hello World

    ` * **Attributes** `[]`: `a[href=index.html target=_blank]` → `` * **Combined**: `a.btn{Click Me}` → `Click Me` ### **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 ```bash "emmet.includeLanguages": { "javascript": "javascriptreact" } ``` * **Result:** Typing `.box` inside a `.js` file now expands to `
    `. ## 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 ```bash { "html": { "snippets": { "ull": "ul>li[id=${1} class=${2}]*2{ Will work with html, pug, haml }", "oll": "
    1. Will only work in html files
    ", "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 `` in HTML files, but `ul > li` in Pug files. * **Raw HTML** (`