Zen Coding: Быстрый способ написания HTML/CSS кода

В данной статье мы раскрываем возможности быстрого написания HTML кода используя синтаксис похожий на вывод CSS-селекторов – это подручный набор инструментов для высокоскоростного написания кода на HTML и CSS. Он был разработан Сергеем Чикуенком и предоставлем для читателей Smashing Magazine

Сколько времени вы затрачиваете на написание HTML кода: все эти тэги, атрибуты, кавычки, скобочки и т.д. и т.п.? Все это упрощается, если ваш редактор кода поддерживает функции “автозавершение кода”, но и это не преуменьшает количества набора.

У нас та же проблема в области JavaScript, когда мы хотим добраться до определенного элемента на Веб-странице. Приходится писать кучу кода, который сложно разбирать, поддерживать и развивать в будущем. Но тут пришли JavaScript фреймворки, которые представили движки CSS-селекторов. И вот, теперь есть возможность использовать простые CSS выражения для доступа к DOM элементам.

А что если вы сможете использовать CSS селекторы не только для стилизации или доступа к элементам, но и для генерации кода? Например, что если вы напишите так…

…и получите на выходе следующее?

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

Если вы хотите пропустить подробные инструкции и руководство по использованию, посмотрите на демо и скачайте плагин:

Демо

  • Demo (нажмите Ctrl + , для разворачивания аббревиатуры, требует JavaScript для работы)

Загрузка (Полная поддержка)

Загрузка (Частичная поддержка, только “Разворачивание аббревиатур” )

Источники

0 ответы

Ответить

Хотите присоединиться к дискуссии?
Приглашаем поучаствовать!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">