Эммет — инструмент, который поможет писать HTML и CSS быстро.
Слева пишем обычным способом, справа с помощью эммета — сравните:
Как это работает: пишем комбинацию, жмем Tab и код раскрывается в HTML.
Расскажу про самые частые комбинации, которые вам пригодятся. Откройте кодпен в новой вкладке и повторяйте, чтобы запомнить. Эммет в кодпене уже установлен, поэтому все будет работать.
HTML
Повторим алгоритм: пишем комбинацию, жмем `Tab` и код раскрывается в HTML.
Див или любой другой тег
Пишем тег и раскрываем:
Тег с классом
Чтобы написать класс, поставьте перед названием точку, прям как в CSS. Если написать класс без тега .my-class, то комбинация раскроется в <div class=”my-class”></div>
Вложить тег в тег
Чтобы записать код внутри тега, поставьте знак >
Теги друг за другом
Чтобы расположить теги друг за другом, поставьте знак +
Несколько одинаковых тегов
Поставьте знак *, чтобы размножить теги:
Текст в теге
Оберните текст в фигурные скобки, чтобы он раскрылся внутри тега:
Рыбный текст
Если не хотите придумывать текст, ставьте шаблонный. Комбинация lorem раскрывает абзац текста. Если дописать цифру lorem2, то раскроется то количество слов, которое вы указали:
Этого хватит для большинства случаев, остальное в документации.
CSS
Алгоритм такой же: пишем комбинацию, жмем `Tab` и получаем CSS.
Свойства
Просто вводите первые буквы свойств:
- fw → font-wegth,
- fz → font-size,
- fs → font-style,
- w → width,
- h → height.
Свойства и значения
Можно вводить свойства сразу со значениями:
- df → display: flex,
- dib → display: inline-block
- w15 → width: 15px,
- p12 → padding: 12px.
Если не хотите пиксели, дописывайте единицу измерения — fz2em → font-size: 2em.
Множественные значения
Чтобы проставить значения подряд, пишите через дефис: p10–12–15.
Как установить эммет в редактор кода
- В Visual Code эммет встроен по умолчанию
- В WebStorm эммет встроен по умолчанию
- Остальные редакторы смотрите в списке
Эммет помогает писать быстро, но все комбинации сразу не запомнить. Поначалу пользуйтесь шпаргалкой, постепенно запомните.