Основы Zen Coding

Ромчик
5

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

Понравилась статья? Поделись с друзьями.
  • Add to favorites
  • Добавить ВКонтакте заметку об этой странице
  • Twitter
  • Facebook
  • Мой Мир
  • LiveJournal
  • Одноклассники
  • Блог Я.ру
  • MySpace
  • FriendFeed
  • В закладки Google
  • Google Buzz
  • Яндекс.Закладки
  • Reddit
  • StumbleUpon
  • Technorati
  • del.icio.us
  • БобрДобр
  • LinkedIn
  • Memori.ru
  • Сто закладок
  • Blogger

  • Sublime Text 2 - основы | Все о WEB программировании - 27.03.2013 в 15:53

    […] Zen Coding, что такое Zen Coding я писал в своей стаье “Основы Zen Coding”. Есть плагин для работы с Git — sublime-text-2-git. И многие […]

  • SublimeText 2 для web-разработчика | Все о WEB программировании - 01.04.2013 в 08:41

    […] Что такое ZenCoding и как с ним работать, думаю, объяснять не надо. Если же кто-то еще не в курсе, то рекомендую прочитать мою статью “Основы Zen Coding” […]

  • Прощай ZenCoding, привет Emmet | Все о WEB программировании - 04.04.2013 в 11:03

    […] времени суток. В данной статье мы о “младшем брате” Zen Coding — Emmet. Emmet пришел на смену Zen Coding. Emmet — это плагин […]

  • Pavel Kozlov - 24.11.2013 в 19:15

    У вас тут ошибка ul#test>li.item-$*3, явно должно быть 5.
    А так, статья хорошая.

    • Roman - 24.11.2013 в 19:38

      Да, действительно, спасибо

  • ©2012-2017 По всем вопросам обращайтесь через форму обратной связи

    Яндекс.Метрика