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