Emmet (ex Zen-Coding)

Давайте просто напишем в редакторе div, нажмём tab (для Sublime Text 2, в вашем редакторе может быть и другая клавиша) и получим:

Или, допустим, мы хотим создать ненумерованный список из 5 элементов, для этого пишем:   ul>li*5

Результат:

   

   

   

   

   

Работа с классами, дивами (элемент по умолчанию) и структурой также довольно проста. Создадим небольшой лэйаут:

.container>.header+.main+.footer

Результат:

   

   

   

Или то же самое, но в стиле html5:

.container>header+.main+footer

Результат:

   

   

   

Emmet прямо таки читает наши мысли! К примеру, если мы напишем просто a и нажмём tab, то результат будет такой:



Т.е. атрибут href дописывать не придется — Emmet обо всё позаботился за нас.

А как насчёт счетчика нумерации? И можно ли помещать текст внутри тегов? Давайте рассмотрим пример сложнее:

ul#nav>li.item$*4>a{Item $}

Нажимает tab

   
• Item 1

   
• Item 2

   
• Item 3

   
• Item 4

Уделите время и поиграйтесь с этими параметрами: $, {text}, *. Это довольно забавно :)

Дополнительные атрибуты задаются очень просто:

input[name="client"]