Для большинства разработчиков сокращения Emmet стали незаменимым инструментом в повседневной работе. Эти шорткаты помогают значительно ускорить процесс кодирования, снижая риск развития синдрома запястного канала и экономя драгоценные минуты. Простой пример: сокращение ! + [tab], которое генерирует базовую HTML-разметку страницы, экономит около 120 секунд, которые вы могли бы потратить на ручной ввод.
Если вы еще не используете Emmet, эта статья может стать тем самым толчком, который побудит вас начать. А если вы уже знакомы с шорткатами, будет интересно узнать, сколько времени можно сэкономить, используя их.
Шаблон HTML
Сокращение: ! + [tab]
Шаблон HTML:
| Действие |
Символы |
Время (сек) |
| Шорткат |
1 |
1 |
| Ручной ввод |
243 |
121 |
Экономия: 120 секунд
Создание HTML-элементов
Для начала создадим блок с вложенными элементами:
- Оператор
> указывает на вложенные элементы.
- Оператор
* обозначает количество экземпляров элемента.
Пример:
Сокращение: hdr>ul>li*3 + [tab]
| Действие |
Символы |
Время (сек) |
| Шорткат |
11 |
3 |
| Ручной ввод |
58 |
16.2 |
Экономия: 13.2 секунды
Следующий пример включает создание одноуровневых элементов:
- Оператор
+ используется для создания одноуровневых элементов.
- Оператор
ˆ позволяет подняться на один уровень вверх.
Пример:
Сокращение: div+div>p>span+emˆbq + [tab]
| Действие |
Символы |
Время (сек) |
| Шорткат |
20 |
5.4 |
| Ручной ввод |
80 |
22.8 |
Экономия: 17.4 секунды
Для группировки элементов используется ():
Пример:
Сокращение: div>(hdr>ul>li*2>a)+ftr>p + [tab]
| Действие |
Символы |
Время (сек) |
| Шорткат |
24 |
6 |
| Ручной ввод |
97 |
33.6 |
Экономия: 27.6 секунды
Присвоение атрибутов HTML
- Для создания идентификаторов и классов используются
elem#id и elem.class.
- Для присвоения нескольких классов одному элементу используется
elem.class1.class2.
Пример:
Сокращение: hdr+main.page+ftr.class1.class2 + [tab]
| Действие |
Символы |
Время (сек) |
| Шорткат |
31 |
10 |
| Ручной ввод |
84 |
18 |
Экономия: 8 секунд
Для создания нумерованных имен классов используется суффикс $:
Пример:
Сокращение: ul>li.item$*5 + [tab]
| Действие |
Символы |
Время (сек) |
| Шор |
20 |
4.8 |
| Ручной ввод |
96 |
23.4 |
Экономия: 18.6 секунды
Добавление текста в элементы
Сокращение {} позволяет добавить текст прямо в элементы.
Пример:
Сокращение: hdr>ul>li#nav${nav-item$}*3 + [tab]
| Действие |
Символы |
Время (сек) |
| Шорткат |
27 |
10.2 |
| Ручной ввод |
119 |
32.4 |
Экономия: 22.2 секунды
Вывод
Использование сокращений Emmet может значительно сократить время, затрачиваемое на кодирование, и повысить эффективность вашей работы. Однако важно помнить, что для максимальной пользы от Emmet необходимо иметь хорошее понимание того, как и когда использовать шорткаты. Для простых структур и частых шаблонов Emmet действительно незаменим, но его эффективность может снизиться, если вы не уверены в правильном сокращении или последовательности. В любом случае, регулярная практика работы с Emmet окупается сторицей, как в скорости, так и в удобстве.
