Emmet это плагин для многих популярных текстовых редакторов, который значительно улучшает рабочий процесс HTML и CSS.
В основном, большинство текстовых редакторов позволяют вам хранить и повторно использовать часто используемые фрагменты кода, так называемыми «фрагментами». Хотя фрагменты кода являются хорошим способом повысить производительность, все реализации имеют общие побочные эфекты: сначала нужно определить фрагмент, но нельзя расширять его во время выполнения.
Emmet выводит идею фрагментов на совершенно новый уровень: вы можете вводить CSS-подобные выражения, которые можно динамически анализировать, и выводить их в зависимости от того, что вы вводите в сокращении. Emmet разработан и оптимизирован для веб-разработчиков, чей рабочий процесс зависит от HTML XML и CSS, но также Emmet это плагин для многих популярных текстовых редакторов, который значительно улучшает рабочий процесс HTML и CSS.
Тренажер для работы с Emmet от epixx.github.io
Перейти и потренироваться https://epixx.github.io/emmet/
Основная цель данной статьи познакомить Вас с отличным сервисом, который поможет Вам повысить Ваш скил при работе с Emmeт снипетами (фрагментами кода).
Другие обучающие проекты для работы с Emmet
Есть также много других фантастических обучающих программ онлайн. Большинство фокусируется на использовании Emmet в контексте веб-дизайна и разработк. Вот несколько из лучших:
- Прохладный и легкий HTML со статьей Emmet от Atomic Object
- Эммет (это круто) скринкаст из CSS-хитрости
- Прощай, дзен-кодирование, привет, Эммет! статья из журнала Smashing Magazine
- Ускоренный рабочий процесс: освоение серии Emmet из SitePoint
Вы не знаете что такое Emmet?
Emmet – это бесплатная надстройка для вашего текстового редактора, которая позволяет вам вводить снипеты, которые затем превращаются в полные куски кода. Используя Emmet, дизайнеры для работы с макетами электронной почты набирают меньше текста, экономя время и клавиши при создании очереднйо кампании. Кроме того, полагаться на автозаполнение Emmet означает меньше опечаток и пропущенных тегов, что приводит к более надежной верстке.
Emmet доступен для различных текстовых редакторов и встроен прямо в Litmus Builder. Популярный среди веб-дизайнеров, Emmet также популярен среди небольшого числа разработчиков макетов для электронной почты, особенно европейцев и маркетологов, которые пишут электронные письма с нуля. Например, 11% маркетологов в Европе и Великобритании и 13% тех, кто кодирует электронные письма с нуля, используют Emmet, согласно исследованию состояния рабочих процессов в электронной почте в 2018 году от litmus.com .
После установки Emmet позволяет печатать, используя сокращенный код, который следует тем же соглашениям, что и в HTML и CSS. Дизайнеры могут вводить имена элементов, добавлять идентификаторы и селекторы классов, а также использовать более продвинутые функции Emmet для ускорения процесса кодирования. Они могут даже вкладывать элементы, используя те же селекторы дочерних и родственных элементов, что и в простом CSS, чтобы быстро создавать большие блоки кода.
Использование Emmet
Самый простой способ понять Эммет – это посмотреть на пример. Допустим, вам нужна таблица из трех строк, каждая из которых содержит ячейку таблицы с изображением над абзацем текста и ссылкой.
Выше наша желаемая структура.
Вместо того, чтобы вручную вводить – или копировать и вставлять – каждую строку, ячейку таблицы, изображение, абзац и тег ссылки, вы можете сократить это до одной строки и позволить Эммету выполнить большую часть работы за вас.
После нажатия кнопки TAB, чтобы вызвать Emmet, одна строка кода выше раскрывается в полный HTML.
<table>
<tr>
<td>
<img src="" alt="" />
<p></p>
<a href=""></a>
</td>
</tr>
<tr>
<td>
<img src="" alt="" />
<p></p>
<a href=""></a>
</td>
</tr>
<tr>
<td>
<img src="" alt="" />
<p></p>
<a href=""></a>
</td>
</tr>
</table>
Эта строка кода выглядит пугающей, но как только вы познакомитесь с синтаксисом Эммета, она станет второй натурой. Давайте разберемся с этим.
Строка начинается с элемента таблицы, который сообщает Эммету, что первым раскрываемым элементом является таблица HTML. Используя дочерний селектор (>) и оператор умножения (*), мы сообщаем Emmet включить три строки таблицы в основную таблицу.
Затем мы добавляем еще один дочерний селектор, чтобы добавить ячейку таблицы в каждую строку таблицы. Внутри этих ячеек таблицы мы включаем изображение, абзац и тег привязки как братья и сестры (+) друг друга.
Для дизайнеров электронной почты, которые полагаются на атрибуты HTML для обеспечения согласованности между различными приложениями электронной почты, вы даже можете включить атрибуты, которые Emmet затем будет использовать в своем расширенном коде. Просто поместите ваши атрибуты и их значения в квадратные скобки, разделенные пробелами. Например, если мы хотим включить в таблицу cellpadding и cellspacing, мы бы написали:
table[cellpadding=0 cellspacing=0]
Emmet обладает множеством полезных функций, включая функции для группировки элементов, быстрой навигации, удаления тегов, слияния строк и даже добавления фиктивного текста. Хотя здесь слишком много возможностей для обсуждения, электронная документация Emmet – отличное место, чтобы узнать больше.