Всем нам приходится писать 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. Внешний элемент - <div> с id "page" (помним, что когда мы в css хотим указать стиль для элемента по его id мы пишем [имя_тега-опционально]#id_элемента)
2. Внутри <div> создаем элеменит <h3> с атрибутом "title"
3. На том же уровне, что и <h3> (т. е. прямо внутри <div>) пишем тег <ul> с классом "menu"
4. Внутри <ul> создаем три тега <li> с классом "item", внутри каждого из которых вложенный тег <a>

Муторным это выглядит лишь на первый взгляд. Я освоился примерно за полчаса.

Но это еще не все.

Zen Coding не чужды и такие простые радости, как просто сокращения имен тегов и css-свойств. Например, bq он автоматом разворачивает в <blockquote></blockquote> (в 12! раз меньше символов писать руками), а bcg - в background-color. Манна небесная, это очевидно.

Вам все еще не завидно?

Ну тогда посмотрите демонстрацию от мастера дзена

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 в его нынешнем виде, а так же автору ранних версий, и Сергею Чикуёнку, воплотившему его в коде. Так же можно сказать спасибо автору плагина для вашего любимого редактора или же вам самим, если вы таковым пожелаете стать.

PS. Delain - April Rain