Основы Zen Coding
Доброго времени суток. В данной статье я хочу познакомить Вас с Zen Coding. Что такое Zen Coding? Zen Coding — это набор плагинов для различных редакторов, позволяющих в несколько раз увеличить скорость написания HTML кода. Те кто еще не пользуется Zen Coding — попробуйте, Вам понравиться, да и синтаксис используется похожий на CSS. Так, что изучить его не составит труда, а выгода огромная. И так, приступим…
Как я уже говорил синтаксис Zen Coding похож на синтаксис CSS. Что бы понять, что же такое Zen Coding давайте рассмотрим пример:
div#page>div.logo+ul#navigation>li*5>a
Применяем плагин и получаем:
<div id="page"> <div class="logo"></div> <ul id="navigation"> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> </ul> </div>
Как видно из примера насколько Zen Coding упрощает нам жизнь. Для того,чтобы использовать данный плагин, его необходимо подключить к вашему редактору. Как подключить Zen Coding к NetBeans я описал в своей статье “Настройка NetBeans”. Со списком поддерживаемых редакторов Вы можете ознакомиться на этой странице.После того, как мы подключили Zen Coding можно приступить к его изучению.
HTML селекторы
И так, мы хотим написать div с id=’test’, для этого в Zen Coding используется следующий код:
div#test
Посмотрим, что получилось:
<div id=”test”></div>
Или мы хотим создать div с class=”test”, тогда в Zen Coding пишем следующий код:
div.test
Посмотрим, что получилось:
<div class=”test”></div>
Следующий шаг, задать div с class=”test test1”. Нет ничего проще:
div.test.test1
Применяем Zen Coding:
<div class=”test test1”>
Как видим, синтаксис Zen Coding мало, чем отличается от синтаксиса CSS.
Теперь мы хотим, чтобы в div был тег p с id=”test”. Для того, чтобы вложить один тег в другой используется символ >. Теперь для реализации нашего примера пишем следующий код:
div>p#test
И видим:
<div> <p id="test"></p> </div>
Теперь мы хотим отобразить два тега div, в Zen Coding используется +:
div+div
Получаем:
<div></div> <div></div>
Вот теперь самое интересное, мы хотим в тег div поместить тег p с id=”title” и тег a с class=”link”. Для этого пишем:
div>p#title+a.link
И получаем:
<div> <p id="title"></p> <a href="" class="link"></a> </div>
Отлично, рассматриваем дальше. Нам необходимо добавить ul с 5 li. Пишем:
ul>li*5
Вуаля:
<ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul>
Но тут есть еще один момент мы хотим добавить ul c id=”test” в него поместить 5 li с class=”item-1”, class=”item-2”, …, class=”item-5”. Пишем:
ul#test>li.item-$*3
И получаем:
<ul id="test"> <li class="item-1"></li> <li class="item-2"></li> <li class="item-3"></li> <li class="item-4"></li> <li class="item-5"></li> </ul>
Как видите Zen Coding облегчает нам написание html кода в несколько раз.
Давайте рассмотрим еще несколько полезных “фишек”
Для того, чтобы получить:
<ul> <li></li> </ul>
Достаточно прописать:
ul+
Или, чтобы получить:
<table> <tr> <td></td> </tr> </table>
Достаточно прописать:
table+
Как Вы уже увидели Zen Coding облегчает написание HTML кода в разы, да и переход на него не составляет труда. Так, что пользуйтесь и наслаждайтесь жизнью.
А на этом все, все удачной разработки.
[…] Zen Coding, что такое Zen Coding я писал в своей стаье “Основы Zen Coding”. Есть плагин для работы с Git — sublime-text-2-git. И многие […]
[…] Что такое ZenCoding и как с ним работать, думаю, объяснять не надо. Если же кто-то еще не в курсе, то рекомендую прочитать мою статью “Основы Zen Coding” […]
[…] времени суток. В данной статье мы о “младшем брате” Zen Coding — Emmet. Emmet пришел на смену Zen Coding. Emmet — это плагин […]
У вас тут ошибка ul#test>li.item-$*3, явно должно быть 5.
А так, статья хорошая.
Да, действительно, спасибо