• Элементы: div, p, span, ul, li и любые другие HTML-теги. Просто введите название тега и нажмите Tab.
• Классы: .имя_класса. Например, .container развернется в <div class="container"></div>.
• ID: #идентификатор. Например, #header развернется в <div id="header"></div>.
• Дочерние элементы: родитель > потомок. Например, nav > ul > li развернется в <nav><ul><li></li></ul></nav>.
• Соседние элементы: элемент1 + элемент2. Например, div + p развернется в <div></div><p></p>.
• Подъем на уровень вверх: элемент1 > элемент2 ^ элемент3. Например, div > p > span ^ strong развернется в <div><p><span></span></p><strong></strong></div>.
• Группировка: (элемент1 > элемент2) + элемент3. Например, (div > ul > li*2) + p развернется в <div><ul><li></li><li></li></ul></div><p></p>.
• Умножение: элемент*количество. Например, li*3 развернется в <li></li><li></li><li></li>.
• Нумерация: элемент.item$*3. Развернется в <div class="item1"></div><div class="item2"></div><div class="item3"></div>. Используйте $$ для двузначной нумерации (item01), @- для обратной нумерации (item3, item2, item1), @n- для начала нумерации с n (item3, item4, item5 для @3*3).
• Атрибуты: элемент[атрибут="значение"]. Например, a[href="#"] развернется в <a href=""></a>. Можно указывать несколько атрибутов: input[type="text" name="username"].
• Текст: элемент{текст}. Например, p{Привет, мир!} развернется в <p>Привет, мир!</p>.

Основные сокращения CSS:

• Свойства: Просто введите сокращение CSS-свойства и значение. Например, w100 развернется в width: 100px;, bgc#fff в background-color: #fff;, m0-a в margin: 0 auto;, dib в display: inline-block;.
• Значения по умолчанию: Для некоторых свойств Emmet предлагает значения по умолчанию. Например, pos развернется в position: relative;, z в z-index: 1;.
• Сокращения с несколькими значениями: Используйте - для разделения значений. Например, p10-20-5-15 развернется в padding: 10px 20px 5px 15px;.
• Вендорные префиксы: Emmet автоматически добавляет необходимые вендорные префиксы. Например, trf:scale(1.2) развернется в -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2);.

Неявные теги:

Emmet может неявно определять теги на основе контекста:

• .класс → div.класс
• em>.класс → <em><span class="класс"></span></em>
• ul>.класс → <ul><li class="класс"></li></ul>
• table>.строка>.ячейка → <table><tr class="строка"><td class="ячейка"></td></tr></table>

Как использовать:

Просто введите сокращение Emmet в поддерживаемом редакторе кода (например, VS Code, Sublime Text, Atom) и нажмите клавишу Tab.

Ресурсы:

• Официальная документация Emmet: https://docs.emmet.io/cheat-sheet/
• Devhints Emmet Cheatsheet: https://devhints.io/emmet
• QuickRef.ME Emmet Cheat Sheet: https://quickref.me/emmet.html