Ускоряем написание HTML и CSS с помощью Emmet (Бывший Zen coding)

Заработок верстальщика, во многом зависит от того как быстро он работает, думаю, это утверждение не нужно доказывать, все и так понятно. Поэтому, вполне логично, что многие, теми, или иными способами, пытаются себя ускорить, и сегодня я расскажу о Emmet –плагине для текстовых редакторов, который позволяет вбивать HTML и CSS c огромной скоростью.

Как это работает?

Очень просто, вместо стандартного HTML и CSS, вы вбиваете заранее заданные сокращения, например, вместо нудного прописывания HTML- списка с ссылками из 10 элементов, вам нужно написать:

ul>li*10>a{item$}

Нажать заранее задданое сочетание клавиш, и вы получите:

<ul>
    <li><a href="">item1</a></li>
    <li><a href="">item2</a></li>
    <li><a href="">item3</a></li>
    <li><a href="">item4</a></li>
    <li><a href="">item5</a></li>
    <li><a href="">item6</a></li>
    <li><a href="">item7</a></li>
    <li><a href="">item8</a></li>
    <li><a href="">item9</a></li>
    <li><a href="">item10</a></li>
</ul>

Неплохо, неправда ли? =)

Чуть позже я расскажу вам какие в Emmet существуют операторы, и как этим делом пользоваться, но для начала давайте его установим.
На текущий момент плагин доступен для следующих редакторов:

Sublime Text
Atom
Eclipse/Aptana
TextMate
Chocolat
Komodo Edit
Notepad++
Brackets
NetBeans
Adobe Dreamweaver

Полный список можно посмотреть здесь

Установка Emmet в Sublime Text 3

Для начала скачайте архив с плагином, и разорзивируйте содержимое в папку Packages, что бы узнать где она находится, откройте Sublime text, и в меню Preferences кликние по пункту «Browse Packages».
Перезайтите в Sublime, что бы проверить работоспособность, введите «div», и нажмите «Ctrl+e», если все хорошо, то может произойти 2 вещи.

Плагин сработает и строка «div» раскроется в «<div></div>»
Выскочит сообщение о том что вам нужно подождать пока скачается «PyV8», тут нет ничего страшного, просто подождите пару минут и попробуйте еще раз

Установка Emmet в Notepad++

Открываем N++
В меню Плагины, запускаем «Plugin manager->Show Plagin manager»
В списке плагинов находим «Emmet», выделяем его и нажимаем «install»
Plugin manager предложит так же установить «Python script», соглашаемся.
После непродолжительной загрузки, нам нужно будет перезагрузить N++.
Теперь, давайте зайдем в «опции->горячие клавиши->Plugin commands».
Для работы, нам, как минимум, нужно установить горячие клавиши для «Expand Abbreviation» и «Wrap with Abbreviation» (по умолчанию стоит «Ctrl+Alt+Enter» и «Ctrl+Alt+Shift+Enter», что не очень удобно), я поставил «Alt+Z» и «Ctrl+Alt+Z», тут нужно быть аккуратней, данное сочетание не должно быть занято.
Пробуев ввести «div», и развернуть аббревиатуру «Alt+Z», если все хорошо, то получим «<div></div>»

Если Emmet не работает

если выскакивает ошибка «Uncnown exception», это значит что вам нужно обновить «Python script», скачиваем его тут, устанавливаем как обычную программу и радуемся =)

Команды Emmet

Меня не очень радует вбивать основные теги для HTML-документа каждый раз, раньше я просто держал в запасе шаблон, который копировал в нужную папку и начинал работу, Emmet это сильно упрощает, мы можем ввести:

Или

Html:5

Раскрыть сокращение, и получить

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

Если вы не используетете Html 5, то можно также использовать «html:xt» для XHTML и «html:4s» для HTML4.

Если мы хотим просто вывести отдельный тег, то, соответственно, пишем его название, при этом нам не нужно беспокоиться о закрытии тега, и необходимых атрибутах, Emmet это берет на себя.

Допустим, введем:

img+link

Раскроем сокращение:

<img src="" alt="">
<link rel="stylesheet" href="">

Как вы наверное уже поняли, «+» помогает вывести 2 последовательных тега. Что-бы получить вложенный тег используется оператор «>». Например, из сокращения

div>ul>li

после раскрытия получится

<div>
    <ul>
        <li></li>
    </ul>
</div>

Что-бы повторить какой-то элемент несколько раз используется оператор «*», немного дополним предыдущий пример, и получим:

div>ul>li*5>a

раскроем:

<div>
    <ul>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
    </ul>
</div>

Что-бы не запутаться во вложениях, теги можно группировать:

(div>p)+(span>em)

Раскроем:

<div>
    <p></p>
</div>
<span><em></em></span>

Для тегов можно удобно указать id и класс:

div.class+div#id

создаст:

<div class="class"></div>
<div id="id"></div>

Если нужно вывести другие атрибуты, используем квадратные скобки:

div[title="Hello" myattr=3]

выведет:

<div title="Hello" myattr="3"></div>

Фигурные скобки используются для вывода содержимого:

h1{Заголовок}

Даст:

<h1>Заголовок</h1>

А что если при выводе нескольких элементов с помощью умножения, нам нужно дать им разные классы(или разное содержимое)? Это тоже возможно

ul>li.class$*5>a{item$$}

где «$» - счетчик от 1:

<ul>
    <li class="class1"><a href="">item01</a></li>
    <li class="class2"><a href="">item02</a></li>
    <li class="class3"><a href="">item03</a></li>
    <li class="class4"><a href="">item04</a></li>
    <li class="class5"><a href="">item05</a></li>
</ul>

Если мы хотим изменить начальное число то пишем «$n», где n – число с которого нужно начать отсчет.
Что-бы отсчет шел на уменьшение, после «$» нужно добавить «@-»

li.class$@-2*3

получим:

<li class="class4"></li>
<li class="class3"></li>
<li class="class2"></li>

Иногда бывает, что какой-то тег нужно поднять на уровень (пару уровней) вверх. Тут поможет оператор «^». Допустим, что мы вбиваем HTML-структуру для шапки сайта:

Header>div#main-menu>ul>li*5>a{item$@-}^^^img#logo

Получим:

<Header>
    <div id="main-menu">
        <ul>
            <li><a href="">item5</a></li>
            <li><a href="">item4</a></li>
            <li><a href="">item3</a></li>
            <li><a href="">item2</a></li>
            <li><a href="">item1</a></li>
        </ul>
    </div>
    <img src="" alt="" id="logo">
</Header>

У Emmet есть еще одна фишка которую можно назвать неявным именованием тегов:

.class

Создаст:

<div class="class"></div>

При чем, emmet сам может понять какой тег подставить в зависимости от ситуации

(div>.class)+(tr>.class)+(ul>.class)+(select>.class)+(span>.class)

Получим:

<div>
    <div class="class"></div>
</div>
<tr>
    <td class="class"></td>
</tr>
<ul>
    <li class="class"></li>
</ul>
<select name="" id="">
    <option class="class"></option>
</select>
<span><span class="class"></span></span>

Последнее о чем хотелось бы рассказать касательно HTML, мы может не только развернуть команду Emmet в какой то HTML-код, но и обвернуть обычный текст HTML-тегами.
Стандартная ситуация, мы верстаем шапку сайта, и скопировали из фотошопа текст для элементов меню:

Главная
Продукты 
О нас
Контакты
Связь
Команда
Курсы
Вконтакте

Прописать для каждой пункт меню можно, и многие так делают, но давайте попробуем это ускорить, используем команду «Wrap with Abbreviation» (в sublime - Shift+Ctrl+G, в N++ - Alt+Ctrl+Z), и в появившемся окне пишем:

ul>li*>a

после чего получим:

<ul>
    <li><a href="">Главная</a></li>
    <li><a href="">Продукты</a></li>
    <li><a href="">О нас</a></li>
    <li><a href="">Контакты</a></li>
    <li><a href="">Связь</a></li>
    <li><a href="">Команда</a></li>
    <li><a href="">Курсы</a></li>
    <li><a href="">Вконтакте</a></li>
</ul>

Emmet сделает всю работу за нас, дух уже захватило, от открывшихся возможностей?)

Очень часто при верстке используется так называемая «Рыба», то есть ничего не значащий текст, который выглядит в шаблоне значительно лучше, чем хаотичный набор букв, в Emmet есть встроенный генератор.

Lorem

Получаем:

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas, quo, odit placeat alias 
error eius dolores esse ipsam voluptatum molestiae at perferendis voluptatibus natus ea 
itaque necessitatibus vitae quibusdam sit.

Можно ограничить выводимое количество слов:

Lorem5

Выведет 5 слов:

Lorem ipsum dolor sit amet.

Основное разобрали, кроме HTML, Emmet позволяет также сократить ввод CSS кода, хотя здесь все не так здорово.
Вы можете ввести первую букву любого свойства, и значение:

m100

превратится в

margin: 100px;

Если пиксели вам не подходят, то возможны и другие варианты:
•   p → %
•   e → em
•   x → ex
Многие свойства, начинаются с одной буквы, для уточнения, можно написать несколько первых букв, или несколько любых букв, Emmet постарается найти максимально подходящий вариант:

Bdrs

Получим:

-webkit-border-radius: ;
-moz-border-radius: ;
border-radius: ;

Emmet Вывел свойство с префиксами для основных браузеров, так как оно еще достаточно новое. Если вы хотите добавить префиксы для любого другого свойсва, то перед ним нужно поставить тире:

-w100

Выведет:

-webkit-width: 100px;
-moz-width: 100px;
-ms-width: 100px;
-o-width: 100px;
width: 100px;

Надеюсь вам помогла моя статья, если да, поделитесь ей с друзьями -)

Войдите или зарегистрируйтесь, чтобы отправлять комментарии

Вы здесь

Ускоряем написание HTML и CSS с помощью Emmet (Бывший Zen coding)

Как это работает?

Установка Emmet в Sublime Text 3

Установка Emmet в Notepad++

Если Emmet не работает

Команды Emmet