С помощью Zen Coding вы сможете писать совсем немного, и при этом получать объемный результат (примерно, как и в случае с препроцессорами Jade или Haml, но только здесь вы можете сразу же получить всеми любимый HTML-код). Для тех, кто еще не знаком с данным концептом вообще, мы немного расскажем о работе Zen Coding, и предоставим некоторые способы его применения, а затем подытожим все это кратким руководством о настройке Zen Coding и его применении в примере Sublime Text 2.
Zen Coding VS Препроцессоры
Zen Coding появился еще несколько лет назад, поэтому некоторым из вас может показаться, что это довольно старенький инструмент, и не достоин обсуждения в 2012 году, но мы уверены, что очень многие современные разработчики кода никогда не сталкивались с этим уникальным инструментом.
Давайте начнем с того, что определим, чем Zen Coding не является: не является препроцессором в том плане, в котором мы видим LESS, Sass, Stylus, Jade, Haml и так далее. Хотя здесь и есть сходства. Подобно всем этим инструментам, Zen Coding имеет уникальный синтаксис, направленный на упрощение процесса разработки HTML-кода и CSS.
Тем не менее, в отличие от других инструментов, Zen Coding не добавляет никаких особых свойств типа переменных или миксинов, а также не требует дополнительных файлов, которые нужно пропускать через компилятор. Zen Coding на выходе дает уже готовые коды HTML и CSS и никто, глядя на ваш код «изнутри», не сможет определить, что вы использовали для его разработки.
Возможно, более близкую параллель можно провести с TextExpander – приложением, которое «расширяет» краткие отрывки текста в большие. В целом, Zen Coding – это нечто вроде огромного набора заранее подготовленных макросов по расширению текста, разработанного специально для кодеров HTML и CSS.
Как это работает?
Довольно объяснений, давайте приступим к рассмотрению самого синтаксиса Zen Coding. Если вы уже знакомы с HTML, CSS и концептом DOM, то вы наверняка схватите все на лету.
Давайте начнем с HTML, так как нам кажется, что как раз в этом заключается настоящее преимущество. В качестве нашего первого примера основы, давайте предположим, что нам нужно создать простой div с ID container. Мы сделаем это следующим образом:
Если вы знакомы с Haml, то сразу же заметите, что здесь используются несколько похожие подходы. Сперва мы вписали необходимое нам имя элемента, в нашем случае это div, а затем использовали синтаксис наподобие CSS для того, чтобы внедрить хэштэг для определения обращения к ID. Наконец, мы проследовали по хэштэгу к самому тексту, который нам нужно привязать ID: «container».
Как видно, мы «срезали» необходимый код почти наполовину в данном отрывке. Здесь мы можем не беспокоиться о каких-то открывающих или закрывающих скобках. Наоборот, структура должна оставаться максимально простой.
Мы можем использовать эти знания как стартовую точку в других схожих отрывках кода. К примеру, давайте предположим, что нам нужно создать элемент paragraph с заданным классом. Синтаксис здесь очень схож, только для определения класса мы используем период (опять же, как и в CSS).
Цепочки, родственные и дочерние элементы
Экономия некоторого объема символов может помочь, но что если вы настолько серьезный разработчик, что можете напечатать весь этот код во сне за секунду? Будет ли Zen Coding полезным таким разработчикам?
Ответ, конечно же, будет «да». По сути, чем сложнее структура вашего кода, тем полезнее и будет Zen Coding! Вся мощь здесь заключается в возможности связывать между собой различные элементы.
Как видно, довольно легко можно создавать как дочерние элементы, так и родственные, и все это посредством синтаксиса Zen Coding. Конкретно в случае с CSS-шаблоном, родственные элементы подключаются с помощью символа +, а с дочерними элементами используется символ >.
Zen CSS
Zen Coding предназначен не только для HTML, он также помогает вам разрабатывать код CSS. Дабы быть честными, мы не используем данный функционал Zen Coding часто ввиду того, что большинство текстовых редакторов и так предоставляют довольно мощные свойства автозавершения CSS-параметров, так что любому из нас приходится не так много времени тратить на этот процесс (к тому же, авто-завершение в CSS частенько самовольно переписывает значения Zen Coding). То же самое можно сказать и про HTML, но здесь Zen Coding позволяет делать все гораздо быстрее.
Хотя, вероятно, вам очень понравится функционал работы с CSS в Zen Coding. Давайте рассмотрим пример работы:
Как видно, функционал CSS обычно подразумевает под собой то, что вы начинаете вписывать инициалы с двоеточием на конце, а затем значения, которые применяются к параметру. Вы, вероятно, уже догадались, что с точки зрения CSS, здесь гораздо больше сложных к запоминанию параметров, нежели в HTML. Не забудьте воспользоваться шпаргалками.
Наш любимый HTML-макрос
Шпаргалка Zen Coding может вас смутить ввиду объемов информации, так что, чтобы вы смогли постепенно познакомиться с технологией, давайте мы представим вам наши любимые макросы.
HTML5 Starter
Хотите начать новый HTML-документ с чистого листа? Просто впишите «html:5», и вам не придется больше возиться!
<!--Пишем следующее-->
html:5
<!--Получаем на выходе-->
<!DOCTYPE HTML> <html lang="en-EN">
<head>
<title></title>
<meta charset="UTF-8"> </head>
<body>
</body>
</html>Stylesheet Include
Как только вы начнете разработку нового HTML-файла, вам вероятно захочется привязать каскадные таблицы стилей. К счастью, это можно сделать очень быстро.
<!--Пишем следующее-->
link:css
<!--Получаем на выходе-->
<link rel="stylesheet" type="text/css" href="style.css" media="all">javascript Include
И снова элемент головного отсека вашего документа. После того, как вы настроите CSS, наверняка возникнет желание прикрутить javascript.
<!--Пишем следующее-->
script:src
<!--Получаем на выходе-->
<script type="text/javascript" src=""></script>Anchor Tags
Первый вопрос, что нам пришел в голову касательно Zen Coding, был: «каким образом работают ссылки?» Haml довольно неудобно пользоваться, когда дело доходит до какого-нибудь строчного элемента и атрибутов, и поэтому этот вопрос нас немного тревожил.
Тем не менее, вместо того чтобы предложить нам запутанную схему внедрения ссылок в текст, инструмент предлагает нам просто вписать «a» и после этого структура анкора уже готова к тому, чтобы вы ее заполнили. Возможно, это не намного лучше, но это по крайней мере крайне легко запоминается.
<!--Пишем следующее-->
a
<!--Получаем на выходе-->
<a href=""></a>
<!--Пишем следующее-->
a:link
<!--Получаем на выходе-->
<a href="http://"></a>Multiply Elements
Zen Coding предлагает нам очень удобную функцию размножения элементов, которая позволяет нам крайне просто создавать определенное количество конкретных элементов. Опять же, процесс очень интуитивный, вам просто нужно использовать символ «*» и необходимое количество.
<!--Пишем следующее-->
p*3
<!--Получаем на выходе-->
<p></p>
<p></p>
<p></p>
<!--Пишем следующее-->
ul>li.someclass*4
<!--Получаем на выходе-->
<ul>
<li class="someclass"></li>
<li class="someclass"></li>
<li class="someclass"></li>
<li class="someclass"></li>
</ul>Increment Number
Еще один действительно крутой трюк, который можно провернуть во время размножения элементов – внедрить число приращения в класс или в значение ID. Для того чтобы сделать это, вам просто нужно использовать символ «$».
<!--Пишем следующее-->
ul>li.someclass-$*5
<!--Получаем на выходе-->
<ul>
<li class="someclass-1"></li>
<li class="someclass-2"></li>
<li class="someclass-3"></li>
<li class="someclass-4"></li>
<li class="someclass-5"></li>
</ul>Как заставить всё это работать?
Zen Coding поддерживается во множестве различных текстовых редакторах, и зачастую даже оказывается заранее встроенным в них (как например, в Espresso). Не забудьте посетить страницу проекта Zen Coding в Google, где вы сможете скачать плагины для собственного редактора.
Устанавливаем Zen Coding в Sublime Text 2
Нам довелось столкнуться с багом в Sublime Text. Нам очень нравится этот текстовый редактор, и мы вряд ли когда-нибудь сможем вдоволь насытиться возможностями по его расширению и гибкости. Но у нас есть возможность значительно улучшить Sublime Text 2, если мы добавим в него поддержку Zen Coding.
Для того чтобы сделать это, вам надо будет скачать бесплатный Sublime Package Control от Уилла Бонда (Will Bond). Это отличный менеджер комплектации, который упрощает процесс поиска и установки плагинов в Sublime text.
Как только установите его, нажмите клавиши CTRL+Shift+P, и перед вами выскочит таблица команд – в неё нужно будет вписать install. Вы увидите пункт «Package Control: Install Package», на этой опции нужно будет нажать Enter.
На данном этапе вам нужно будет вписать «Zen Coding» и тогда вам станет доступна комплектация. Просто нажмите Enter еще раз, и комплектация будет установлена (перезагрузите систему, если ничего не происходит). Создайте новый HTML-документ, впишите аббревиатуру, нажмите клавишу Tab, и наблюдайте волшебство (убедитесь, что синтаксис выставлен на HTML, в противном случае у вас ничего не выйдет).
Sublime text сам по себе отличный редактор, и использование его в купе с Zen Codingпри ведет вас в восторг. Это убийственная комбинация, которую вам точно не захочется выпускать из рук.
Используете ли вы Zen Coding?
Дабы быть честными, мы немного пропустили пик Zen Coding пару лет назад. Нам всегда казалось, что интеграция с Espresso гораздо лучше, и поэтому всегда пользовались этим инструментом, и никогда не пытались изучить Zen Coding отдельно. Теперь, когда мы перешли на Sublime Text, мы поначалу были просто шокированы тем, насколько Zen Coding упрощает работу со сложными HTML-структурами.
Что вы думаете на этот счет? Используете ли Zen Coding в своих проектах? Предпочитаете ли вы данный инструмент препроцессорам? Каким образом вы работаете с CSS? Как вы думаете, сильно ли Zen Coding помогает в работе с CSS?
