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

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

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

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

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

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

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

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

   с атрибутом "title"

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

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

   ) пишем тег

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

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

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

     Zen Coding не чужды и такие простые радости, как просто сокращения имен тегов и css-свойств. Например, bq он автоматом разворачивает в

     (в 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://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

     

     Trackback URL for this post:

     /trackback/383

     Молниеносная верстка с помощью Zen Coding | Сталкер - блог

     from Социальная сеть для блоггеров sloger.net on сб, 20/03/2020 - 21:06

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

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

     You are not watching this post, click to start watching

   »

   • Alek$'s blog