Реактивна верстка з Emmet

Коли ви вже отримаєте деякий досвід у верстці, перед вами постане питання як можна пришвидшити процес написання HTML/CSS. Настане той момент коли ви зможете глянувши на макет швидко представити подумки структуру блоків, де буде який тег тощо. Пишучи вже стилі ви теж з часом перестанете часто заглядати до посібника та не будете задумуватися як називалася та чи інша властивість. Щоб вам було менше писати ручками, в текстових редакторах є така річ як автодоповнення. Коли вам і цього стане мало зверніть увагу на Emmet, який зробить вашу верстку просто у 10х швидшою.

Emmet (у минулому Zen Coding) це один з найпопулярніших(якщо не найпопулярніший) додаток серед веб-розробників. Встановивши його ви більше не зможете представити свою роботу без нього :). Вся суть в тому, що замість довгого та нудного розписування всіх тегів та назв правил ви зможете писати просто скорочення, які після натиску на Tab швидко розгорнуться в повний фрагмент код.

Що тут ще казати, гіфка пояснить краще за мене:

приклад роботи додатку Emmet

Emmet можна встановити на всі більш-менш популярні текстові редактори:

  • Sublime Text;
  • Notepad++;
  • PHPStorm(стоїть по дефолту, доречі);
  • Eclipse;
  • Adobe Dreamviewer;
  • NetBeans;
  • Coda;
  • та інші.

Sublime Text 3

Я розгляну встановлення на Sublime Text 3 - один з найпоширеніших редакторів коду, яким сам й користуюся. Встановлення проходить дуже швидко:

Тиснемо Ctrl+Shift+P (або Preferences -> Package Control) та вибираємо зі списку Install Package.

Встановлення Emmet на Sublime Text, крок 1

Прописуємо Emmet та натискаємо на перший же запис. Чекаємо доки пройде встановлення, перезапускаємо редактор.

Встановлення Emmet на Sublime Text, крок 2

Перевіряємо роботу плагіну. Прописуємо ! і тиснемо Tab:

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

</body>
</html>

Непогано, чи не так? Так само можна робити з тегами. Наприклад, a

<a href=""></a>

Так само можна працювати з атрибутами. a[href=page.html]

<a href="page.html"></a>

І тепер відкриймо для себе всю силу Emmet.

Вкладеність робимо за допомогою >. Класи прописуємо через точку. Якщо клас задаємо для тегу div то його можна пропустити. .header>p.text>strong{Hello}

<div class="header">
	<p class="text"><strong>Hello</strong></p>
</div>

Зірочкою * прописуємо кількість елементів, а дужками групуємо елементи. ul>(li>a)*5

<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>

Плюсиком розташовуємо елементи поруч. header+main+footer

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

Якось так. Більше можна дізнатися про синтаксис вже на офіційному сайті. Я ж просто ознайомив вас з таким потрібним інструментом як Emmet.

Пишіть у коментарях, якими ще цікавими плагінами користуєтеся, я планую на днях викласти свою власну підбірку.