Zen CSS

Что может быть важнее для верстальщика, чем комфортная и быстрая работа с HTML-кодом? Правильно — только комфортная и быстрая работа с CSS-кодом. Ведь основная часть работы современного разработчика происходит именно с CSS.

Поэтому, вслед за рассказом о редакторе TextMate и пакете настроек Zen HTML, следует обзор пакета Zen CSS. Для начала, предлагаю вам небольшой скринкаст, демонстрирующий его основные возможности:

Подобно принципам работы предыдущего пакета, принципы этого основаны на использовании псевдонимов для CSS-свойств. Например:

bg → background:|;
bgc → background-color:#|FFF|;

Таким образом, развёрнутое свойство готово к введению значения на месте появления курсора |. В случае, когда значение свойства предсказуемо, как в нашем примере с цветом фона, псевдоним разворачивается со значением по умолчанию, которое выделено и готово к редактированию |…|.

Но помимо длинных свойств, существует некоторое количество достаточно сложных для написания значений, к примеру — list-style-type:decimal-leading-zero. В этой ситуации нам на помощь приходит второй тип псевдонимов — с заданным значением:

lst:n → list-style-type:none;
lst:declz → list-style-type:decimal-leading-zero;

Другая сложность кроется в сокращённом написании свойств — зачастую, нам приходится писать длинные однотипные конструкции вроде font:1em Arial,sans-serif или padding:10px 0 2px 0. Для таких случаев предусмотрены специальные псевдонимы с предустановленными комбинациями значений:

f+ → font:1em Arial,sans-serif;
bg+ → background:#FFF url(../i/) 0 0 no-repeat;

Плюс в данном случае символизирует разворачивание псевдонима в сложное правило. Если нам нужно описать сокращённое свойство блока при помощи двух, трёх или четырёх значений — top|bottom + right|left, top + right|left + bottom, top + right + bottom + left — то мы используем следующий тип псевдонимов:

p:2 → padding:|0| 0;
p:3 → padding:|0| 0 0;
p:4 → padding:|0| 0 0 0;

Главная ценность подобных комбинаций заключается в том, что после разворачивания вы имеете возможность передвигаться по списку значений при помощи клавиши Tab, начиная с первого выделенного значения.

Такой тип псевдонимов предусмотрен только для самых часто употребимых случаев использования двойных, тройных и четверных сокращений — для свойств padding и margin. В дальнейшем, если это окажется востребованным, методика заполнения комбинаций свойств может быть использована для свойств border, outline, а также для значений rgb, rect и подобных им.

Пакет включает в себя все свойства CSS 2.1, а также некоторую экзотику из CSS 3, но пока только в самом простом виде, без широкого круга предустановленных значений:

bsz → box-sizing:|;
bsh → box-shadow:|;
bi → border-image:|;
brs → border-radius:|;

Доступны также типовые варианты решений проблем с IE:

bg:ie → filter:[…]AlphaImageLoader(src='i/|',sizingMethod='crop');
op:ie → filter:alpha(opacity=|);
exp → expression(|)
fr → filter:|;
z → zoom:1;

Ну и конечно некоторые полезные мелочи, повешенные на горячие клавиши — фигурные скобки:

Cmd + Enter →
{
    |
    }

…и заголовки структурных элементов вашего CSS-файла:

Cmd + Alt + / →
/* |
---------------------------------------- */

Следующая публикация из серии Zen Coding, запланированная на ближайшие дни, будет содержать оба пакета настроек — Zen HTML и Zen CSS, а также некоторые планы по их развитию и поддержке.

Энергичный инструментал для скринкаста — группа Skafandr с композицией «Тяжёлый шар земной».