—»     —»   Не понимаете работу препроцессоров? Попробуйте Zen Coding
  Раздел: Инструменты, CSS/Style Sheets   Комментариев: 11  

Не понимаете работу препроцессоров? Попробуйте Zen Coding



В интернете полно рассуждений и обсуждений на тему препроцессоров. Эти чудовищно удобные инструменты сильно упрощают процесс разработки кода, ускоряют его и делают его более доступным к последующей модернизации, но, правда, не для всех. Знакомы вы с препроцессорами или нет, вам следует познакомиться с давним фаворитом, который помогает вам в значительной степени сократить временные затраты на разработку кода без необходимости изобретать какие-то новые подходы и использовать дополнительные компиляторы. Сегодня мы поговорим о Zen Coding.

С помощью Zen Coding вы сможете писать совсем немного, и при этом получать объемный результат (примерно, как и в случае с препроцессорами Jade или Haml, но только здесь вы можете сразу же получить всеми любимый HTML-код). Для тех, кто еще не знаком с данным концептом вообще, мы немного расскажем о работе Zen Coding, и предоставим некоторые способы его применения, а затем подытожим все это кратким руководством о настройке Zen Coding и его применении в примере Sublime Text 2.

Не понимаете работу препроцессоров? Попробуйте Zen Coding

Zen Coding VS Препроцессоры

Zen Coding появился еще несколько лет назад, поэтому некоторым из вас может показаться, что это довольно старенький инструмент, и не достоин обсуждения в 2012 году, но мы уверены, что очень многие современные разработчики кода никогда не сталкивались с этим уникальным инструментом.

Не понимаете работу препроцессоров? Попробуйте Zen Coding

Давайте начнем с того, что определим, чем 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. Мы сделаем это следующим образом:

Не понимаете работу препроцессоров? Попробуйте Zen Coding

Если вы знакомы с Haml, то сразу же заметите, что здесь используются несколько похожие подходы. Сперва мы вписали необходимое нам имя элемента, в нашем случае это div, а затем использовали синтаксис наподобие CSS для того, чтобы внедрить хэштэг для определения обращения к ID. Наконец, мы проследовали по хэштэгу к самому тексту, который нам нужно привязать ID: «container».

Как видно, мы «срезали» необходимый код почти наполовину в данном отрывке. Здесь мы можем не беспокоиться о каких-то открывающих или закрывающих скобках. Наоборот, структура должна оставаться максимально простой.

Мы можем использовать эти знания как стартовую точку в других схожих отрывках кода. К примеру, давайте предположим, что нам нужно создать элемент paragraph с заданным классом. Синтаксис здесь очень схож, только для определения класса мы используем период (опять же, как и в CSS).

Не понимаете работу препроцессоров? Попробуйте Zen Coding

Цепочки, родственные и дочерние элементы

Экономия некоторого объема символов может помочь, но что если вы настолько серьезный разработчик, что можете напечатать весь этот код во сне за секунду? Будет ли Zen Coding полезным таким разработчикам?

Ответ, конечно же, будет «да». По сути, чем сложнее структура вашего кода, тем полезнее и будет Zen Coding! Вся мощь здесь заключается в возможности связывать между собой различные элементы.

Не понимаете работу препроцессоров? Попробуйте Zen Coding

Как видно, довольно легко можно создавать как дочерние элементы, так и родственные, и все это посредством синтаксиса Zen Coding. Конкретно в случае с CSS-шаблоном, родственные элементы подключаются с помощью символа +, а с дочерними элементами используется символ >.

Не понимаете работу препроцессоров? Попробуйте Zen Coding

Zen CSS

Zen Coding предназначен не только для HTML, он также помогает вам разрабатывать код CSS. Дабы быть честными, мы не используем данный функционал Zen Coding часто ввиду того, что большинство текстовых редакторов и так предоставляют довольно мощные свойства автозавершения CSS-параметров, так что любому из нас приходится не так много времени тратить на этот процесс (к тому же, авто-завершение в CSS частенько самовольно переписывает значения Zen Coding). То же самое можно сказать и про HTML, но здесь Zen Coding позволяет делать все гораздо быстрее.

Хотя, вероятно, вам очень понравится функционал работы с CSS в Zen Coding. Давайте рассмотрим пример работы:

Не понимаете работу препроцессоров? Попробуйте 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

Не понимаете работу препроцессоров? Попробуйте Zen Coding

Нам довелось столкнуться с багом в Sublime Text. Нам очень нравится этот текстовый редактор, и мы вряд ли когда-нибудь сможем вдоволь насытиться возможностями по его расширению и гибкости. Но у нас есть возможность значительно улучшить Sublime Text 2, если мы добавим в него поддержку Zen Coding.

Для того чтобы сделать это, вам надо будет скачать бесплатный Sublime Package Control от Уилла Бонда (Will Bond). Это отличный менеджер комплектации, который упрощает процесс поиска и установки плагинов в Sublime text.

Не понимаете работу препроцессоров? Попробуйте Zen Coding

Как только установите его, нажмите клавиши CTRL+Shift+P, и перед вами выскочит таблица команд – в неё нужно будет вписать install. Вы увидите пункт «Package Control: Install Package», на этой опции нужно будет нажать Enter.

Не понимаете работу препроцессоров? Попробуйте Zen Coding

На данном этапе вам нужно будет вписать «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?
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Опубликовал Design FactoRy   Прочитано (раз): 8409   |   Оставлено комментариев: 11
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 15 июня 2012 @ 10:24
Написал: Razon — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Уже давно использую в связке с notepad++ очень быстро выучил все правила и сокращения, оптимизировал процесс написания кода в 2-3 раза!
Комментарий #2: 15 июня 2012 @ 11:51
Написал: FAFNIR — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Хм, спасибо за статью, действительно интригующая штука - стоит попробовать на практика. Смотрится действительно компактно, просто визуально не очень воспринимается по-началу.
Комментарий #3: 15 июня 2012 @ 12:55
Написал: Design FactoRy — группа: Администраторы  
На сайте с: 21.07.2009   |   Публикаций: 3300   |   Комментариев: 500
ICQ: --- не указано ---
Razon, нужно будет с notepad++ попробовать ...
FAFNIR, пожалуйста.
Комментарий #4: 15 июня 2012 @ 15:58
Написал: Alexey — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Относительно недавно узнал про этот инструмент.

Реально скорость написания кода у меня повысилась в несколько раз!

Использую в связке с Dreamweaver. Всем рекомендую!
Комментарий #5: 16 июня 2012 @ 01:45
Написал: alexdobdesign — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
А подскажите, пожалуйста, каким образом можно включить зен кодинг в Дримвивере??
Комментарий #6: 16 июня 2012 @ 11:43
Написал: Design FactoRy — группа: Администраторы  
На сайте с: 21.07.2009   |   Публикаций: 3300   |   Комментариев: 500
ICQ: --- не указано ---
alexdobdesign, чтобы добавить Zen Coding в Dreamweaver, нужно скачать архив с плагином и установить его с помощью инструмента Adobe Extension Manager.
Скачать плагин можно по ссылке.
Комментарий #7: 16 июня 2012 @ 12:24
Написал: alexdobdesign — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Design FactoRy, спасибо, что всегда отвечаете!

Ну я скачали установил уже...но нужно ли включать его уже после установки?
Или как он там должен тогда работать?
набираю, например, html:xxs нажимаю tab, а оно не срабатывает....
Комментарий #8: 16 июня 2012 @ 12:52
Написал: Design FactoRy — группа: Администраторы  
На сайте с: 21.07.2009   |   Публикаций: 3300   |   Комментариев: 500
ICQ: --- не указано ---
alexdobdesign, смотрите ... скачали, установили. Далее идете в меню: Правка - Сочетание клавиш. В нем находите Команды - Zen Coding - Expand Abbreviation. И для него рекомендую установить горячую клавишу F11 (она должна быть не занята по умолчанию). Это лучше, чем использование Ctrl + запятая (Ctrl+,). На этом все.

Далее создаете документ и в нем, между тэгами «body»«/body», вбиваете, например, английское "a". Сразу после этого жмете F11 и наслаждаетесь результатами :) Аналогично с иными сокращениями для разметки. Сокращения можете посмотреть в шпаргалке, ссылка на которую дана выше. Т.е. общий принцип следующий: вбиваете сокращение или целую строку и сразу F11 .. сокращение - F11...
Комментарий #9: 16 июня 2012 @ 16:02
Написал: alexdobdesign — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Цитата: Design FactoRy
смотрите ... скачали, установили. Далее идете в меню: Правка - Сочетание клавиш. В нем находите Команды - Zen Coding - Expand Abbreviation. И для него рекомендую установить горячую клавишу F11 (она должна быть не занята по умолчанию). Это лучше, чем использование Ctrl + запятая (Ctrl+,). На этом все.


о да!
Огромное вам спасибо!
Теперь работает...только я не ф11 поставил а на кл. Ins ...она у меня какая то ненужная))
Комментарий #10: 26 июня 2012 @ 07:49
Написал: vtboren — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
А не подскажете можно ли как то привязать Zen Codding к редактору Intype?
Комментарий #11: 26 июня 2012 @ 16:15
Написал: Design FactoRy — группа: Администраторы  
На сайте с: 21.07.2009   |   Публикаций: 3300   |   Комментариев: 500
ICQ: --- не указано ---
vtboren, увы, я не подскажу, т.к. с Intype не работаю. Может кто-то из читателей подскажет ...
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц November по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


грузоперевозки Краснодар читать
perevoz-gruza.com
бетонные работы сайт
stmontag.ru
Цифры из шаров
Фольгированные шары с доставкой! Для детей и взрослых
aeroball.ru
Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Июль 2017    »
ПнВтСрЧтПтСбВс
 12
3456789
10111213141516
17181920212223
24252627282930
31