Зарегистрируйтесь для доступа к 15+ бесплатным курсам по программированию с тренажером

Emmet — Основы современной верстки

Видео может быть заблокировано из-за расширений браузера. В статье вы найдете решение этой проблемы.

Если вы работаете с редактором Visual Studio Code, то плагин Emmet уже установлен в редакторе. В прошлом уроке вы также могли увидеть его работу при создании базовой структуры HTML-документа. Если вы пользуетесь другим редактором, то можете установить Emmet с помощью любой доступной инструкции. Этот плагин настолько популярен, что при желании, наверное, можно найти инструкцию по его установке на кофемолку.

Что же такое Emmet и зачем он нужен? Попробуем разметить воображаемую карточку товара интернет-магазина. Что нам может понадобиться? Обрамляющий блок, название товара, его картинка, блок с ценой, кнопка «Заказать». Вроде не так много. Добавим карточку и расположим ее внутри секции с классом cards. Попробуем это преобразовать в HTML. Мы получим примерно следующую структуру:

<section class="cards">
  <article class="card">
    <div class="card-title">Название товара</div>
    <img src="/images/card-item-1.png" alt="Товар-1">
    <div class="card-price">
      <span class="price-sum">24 000</span><span class="price-cur">руб.</span>
    </div>
    <button>Заказать</button>
  </article>
</section>

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

На самом деле этот пример был сверcтан всего одной строкой. Изначально она вас может напугать, но к концу урока вы поймете каждый символ, который в ней есть. Строка выглядит следующим образом:

section.cards>article.card>div.card-title{Название товара}+img[src="/images/card-item-1.png"][alt="Товар-1"]+(.card-price>span.price-sum{24 000}+span.price-cur{руб.})+button{Заказать}

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

В самом конце набора строки Visual Studio Code сам вам предложит ее преобразовать. Вам нужно только нажать Enter, когда на экране есть всплывающая подсказка.
Выделить всю строку и нажать комбинацию клавиш Ctrl + Shift + P. В всплывающем окне начать набирать >Emmet: Expand Abbreviation и выбрать этот пункт.

Emmet

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

section.cards — очень похоже на CSS-селектор, и именно так и стоит на него смотреть. Мы хотим создать элемент <section> с классом cards.
> — символ, как и в CSS, указывает на вложенность. В текущем значении запись section.cards> означает, что все, что указано далее, будет располагаться внутри секции с классом cards.
article.card — создаем элемент <article> с классом card.
div.card-title — создаем блочный элемент с классом card-title. Здесь есть хитрость: чтобы создать элемент <div>, не обязательно его указывать напрямую. Если не указан тег перед классом, то Emmet по умолчанию создаст элемент <div>. То есть вместо div.card-title можно было указать .card-title.
{Название товара} — в фигурных скобках указывается простой текст, который будет помещен внутрь блока.
+ — символ сложения означает, что правую часть необходимо расположить рядом с левой, а не внутри нее, как в случае с символом >. Мы хотим расположить картинку рядом с блоком card-title, а не внутри.
img[src="/images/card-item-1.png"][alt="Товар-1"] — создаем элемент <img>. В квадратных скобках указываются атрибуты, которые мы хотим добавить. В данном случае это атрибут src, значением которого является путь до изображения, а второй атрибут alt отвечает за мета-информацию о нашей картинке. Атрибуты можно записывать как по отдельности, так и вместе. Если мы укажем вот такую запись img[src="/images/card-item-1.png" alt="Товар-1"], то результат останется тем же.
() — скобки позволяют группировать информацию. В данном случае мы хотим, чтобы все, что внутри скобок, располагалось рядом с картинкой, созданной в прошлом пункте.

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

header>.logo+nav>ul>li*3

<header>
  <div class="logo"></div>
  <nav>
    <ul>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </nav>
</header>

Обратите внимание на конструкцию *3 — это в прямом смысле умножение. Мы хотим взять элемент и разметить его три раза.

Emmet

table>tr*3>td*3

<table>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

Никогда еще создание таблиц не было таким простым делом :)

header+main+footer

<header></header>
<main></main>
<footer></footer>

А вот и простой способ добавить основные теги в вашу страницу.

div.item-$*3

<div class="item-1"></div>
<div class="item-2"></div>
<div class="item-3"></div>

Символ $ в Emmet является счетчиком. При разворачивании такой строчки все символы $ заменяются на числа от 1 с шагом единица. Есть несколько дополнительных конструкций, которые позволяют расширить данный счетчик:

Если использовать несколько идущих подряд символов $, то столько разрядов в счетчике и будет. Например, div.item-$$$*3 начнет счетчик не просто c нуля, а с трех нулей. Первым элементом в таком случае станет <div class="item-001"></div>.
Счетчик можно начать с любого произвольного числа. Для этого используется символ @, после которого идет начальное число. Например, div.item-$@5*3 начнет счетчик с числа пять. Первым элементом станет <div class="item-5"></div>.

Счетчик можно использовать внутри конструкции {}:

div.item{Работа номер $}*3

<div class="item">Работа номер 1</div>
<div class="item">Работа номер 2</div>
<div class="item">Работа номер 3</div>

Это базовые вещи, которые помогут вам сократить время написания разметки. Emmet куда более мощный инструмент, но этих возможностей вам хватит надолго. Помимо этого он умеет работать с CSS. Там он больше нужен для выписывания сокращений. Вы можете попробовать создать любой CSS-файл и начать набирать свойства. Все, что предложит вам Visual Studio Code, работает и с Emmet.

Самостоятельная работа

Попробуйте воспроизвести следующую верстку с помощью Emmet. Ваша задача из уже готовой верстки сделать строку, как в случае с карточкой товара из этого урока.

<main>
  <h1>Emmet</h1>
  <ul>
    <li>Быстрый</li>
    <li>Удобный</li>
    <li>Нескучные обои</li>
  </ul>
  <p>Emmet помогает мне писать верстку быстрее</p>
  <p>Emmet помогает мне писать верстку быстрее</p>
  <p>Emmet помогает мне писать верстку быстрее</p>
  <p>Emmet помогает мне писать верстку быстрее</p>
  <p>Emmet помогает мне писать верстку быстрее</p>
  <p>Emmet помогает мне писать верстку быстрее</p>
  <p>Emmet помогает мне писать верстку быстрее</p>
  <p>Emmet помогает мне писать верстку быстрее</p>
  <p>Emmet помогает мне писать верстку быстрее</p>
  <p>Emmet помогает мне писать верстку быстрее</p>
</main>