Emmet

Emmet (ранее Zen Coding) - набор плагинов для текстовых редакторов, которые в некоторой степени ускоряют написание кода HTML, CSS.

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

HTML аббревиатуры

- Инициализаторы

Подготовка к работе с новым HTML документом занимает менее чем секунду. Просто введите ! или html:5, нажмите «Tab», и вы увидите HTML5 doctype с несколькими тегами и отправной точкой для вашего приложения.

- Легко добавить классы, IDы, текст и атрибуты

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

p#desc
<p id="desc"></p>

Кроме того, вы можете комбинировать классы и идентификаторы:

p.bar#foo
<p class="bar" id="foo"></p>

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

h1{My title}
<h1>My title</h1>

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

a[href="#"]
<a href="#"></a>

- Вложенность элементов

Используя вложенные сокращения, вы можете построить целую страницу, используя всего одну строку кода. Во-первых, дочерний селектор, в лице >, позволяет вкладывать элементы. Селектор соседних элементов, в лице +, позволяет размещать элементы рядом друг с другом, на том же уровне. Наконец, новый оператор перехода на уровень выше, в лице ^, позволяет перейти по дереву элементов вверх на один уровень.

p>span
<p><span></span></p>

h1+h2
<h1></h1>
<h2></h2>

p>span.title^p#desc
<p><span class="title"></span></p>
<p id="desc"></p>

- Группировка

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

(.foo>h1)+(.bar>h2)
<div class="foo">
    <h1></h1>
</div>
<div class="bar">
    <h2></h2>
</div>

- Умножение

Вы можете определить, сколько раз элемент должен быть выведен с помощью оператора *.

ul>li*3
<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

- Нумерация

Как на счёт комбинации оператора умножения и нумерации? Просто поставьте оператор $ в конце названия атрибута или элемента и будет вам счастье!

ul>li.item$*3
<ul>
    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li>
</ul>

CSS аббревиатуры

- Значения

Emmet предназначен для упрощения написания не только HTML, но и CSS кода. Допустим, вы хотите задать ширину:

w100
width: 100px;

Значение px ставится по умолчанию. Другие единицы измерения используют свои символы:

h10p+m5e
height: 10%;
margin: 5em;

- Дополнительные опции

@f
@font-face {
    font-family: ;
    src: url();
}

@f+
@font-face {
    font-family: 'FontName';
    src: url('FileName.eot');
    src: url('FileName.eot?#iefix') format('embedded-opentype'), 
           url('FileName.woff') format('woff'),
           url('FileName.ttf') format('truetype'), 
           url('FileName.svg#FontName') format('svg');
    font-style: normal;
    font-weight: normal;
}

- Приставки браузеров

CSS3 крут, но вендорные префиксы - реальная боль для всех нас. Теперь уже нет, Emmet нам поможет. Например, trs будет преобразовано в:

trs
-webkit-transition: prop time;
-moz-transition: prop time;
-ms-transition: prop time;
-o-transition: prop time;
transition: prop time;

Lorem ipsum

Забудьте о сторонних сервисах, которые производят текст "Lorem ipsum". Теперь вы можете сделать это быстро в своем редакторе. Просто используйте lorem или lipsum для сокращения. Вы можете определить сколько слов требуется вывести. Например, lorem10 выведет:

lorem10
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, quas?

p*3>lorem3
<p>Lorem ipsum dolor.</p>
<p>Corporis facere, quod?</p>
<p>Consectetur, consequatur, maxime?</p>