Всем нам приходится писать html-код, кому-то больше, кому-то меньше.

В частности, у меня написание шаблонов для моих движков зачастую занимает до трети времени от разработки. Главная причина тому - сравнительная многословность html, да и css. Так бы я и мучился, если бы очередной раз не наткнулся на статью по Zen Coding.

Как постичь Дзен?

Если кратко, то Zen Coding - это целое семейство плагинов к разным редакторам, позволяющее писать сокращенный код, который потом будет автоматически развернут с полную конструкцию. Вот вам сразу пример:

div#page>h3.title+ul.menu>li.item*3>a

Будет развернут в конструкцию

<div id="page">   <h3 class="title"></h3>   <ul class="menu">      <li class="item"><a href="#"></a></li>      <li class="item"><a href="#"></a></li>      <li class="item"><a href="#"></a></li>   </ul></div>

Выигрыш в количестве набираемых символов примерно четырехкратный. Впечатляет, не так ли? Правда на первый взгляд синтаксис сокращенного варианта мутный и плохо запоминаемый, но это лишь на первый взгляд. Этот синтаксис основан на близком и родном всем нам синтаксисе css селекторов. Приведенный выше пример интерпретируется так:

1. Внешний элемент -
   с id “page” (помним, что когда мы в css хотим указать стиль для элемента по его id мы пишем [имя_тега-опционально]#id_элемента)
2. Внутри
   создаем элеменит

   с атрибутом “title”

3. На том же уровне, что и

   (т. е. прямо внутри

   ) пишем тег

   с классом “menu”
   • Внутри
     создаем три тега
     • с классом “item”, внутри каждого из которых вложенный тег

Zen Coding v0.5 from Sergey Chikuyonok on Vimeo.

A new way of writing HTML code using CSS-like selector syntax. Read http://www.smashingmagazine.com/2009/11/21/zen-coding-a-new-way-to-write-html-code/ for more info.

Окончательно заинтересовались?

Ну тогда вот вам серьезные ссылки, а не понты с финтифлюшками:

1. Концепт Zen Coding - можно считать основным учебником, после прочтения уже можно приступать к использованию.
2. Селекторы и псевдонимы для плагинов Zen HTML - первая часть подробной библии Дзена. Полный справочник по конструкциям вроде той, которую я привел вначале.
3. HTML-элементы и их псевдонимы для плагинов Zen HTML - вторая часть оной библии. Длиннейшая скатерть с полезнейшими сокращениями. Тоже можно юзать в качестве справочника и запоминать по ходу использования.
4. CSS-свойства и их псевдонимы для плагинов Zen CSS - третья часть. Использовать аналогично предыдущей.
5. Домашняя страница Zen Coding. Самая вкусная ссылка. Там есть все вышеуказанные ссылки, а так же много других, не менее интересных, включая ссылки на добрых два десятка плагинов для разных редакторов и сред.

### Кому говорить спасибо?

За такие вещи точно надо говорить спасибо, особенно учитывая то, что это чудо мысли бесплатно и опенсорсно.

Спасибо надо сказать в первую очередь Вадиму Макееву, придумавшему концепт Zen Coding в его нынешнем виде, а так же автору ранних версий, и Сергею Чикуёнку, воплотившему его в коде. Так же можно сказать спасибо автору плагина для вашего любимого редактора или же вам самим, если вы таковым пожелаете стать.

P.S. Delain — April Rain