CSS-препроцессоры

Некоторое время я довольно скептически относился к CSS-препроцессорам. Мне казалось, что хороший код в этом не нуждается. В конце-концов, CSS — это не язык программирования, который требует логики, переменных и прочего. Однако, чем сложнее проект и выше твои собственные требования к разработке, тем яснее понимаешь, что пропроцессоры — это вовсе не «костыли», а необходимый шаг.

Основная проблема «ванильного» CSS — это повторение кода, которое усложняет дальнейшую его поддержку. Конечно, данную проблему можно решить при помощи более грамотных подходов к разработке. Таких подходов в последние годы появилось немало, например: БЭМ, OOCss или Smacss. Но все эти методологии предполагают полный контроль над разметкой, который не всегда возможен (в случае работы с CMS, например, это может быть проблемой). Кроме того, в отдельных случаях семантика верстки тоже может пострадать.

Препроцессоры типа LESS, SASS и Stylus этих недостатков лишены — с их помощью вы контролируете стили в самом CSS, не вмешиваясь в разметку. Кроме того, у них целое море других удобных и полезных фишек.

Один проект, которым я сейчас занимаюсь, послужил отличной тестовой площадкой для того, чтобы попробовать препроцессоры. Начал я с обычного CSS. Всё, в общем-то, получалось, но где-то в глубине души скреблись кошки, так как постоянно приходилось идти на компромиссы: то добавляя лишние классы к элементам, то дублируя CSS-правила. В какой-то момент мне это надоело и я решил переписать всё на LESS.

LESS я выбрал потому что он показался проще в освоении, а кроме того у него был приятный графический интерфейс в кроссплатформенной виде программы SimpLESS. Возможности каждого из продуктов мне виделись примерно одинаковыми (достаточными для меня), хотя потом выяснилось, что это не так. В общем, я переписал свой CSS на LESS и всё было хорошо, но одна вещь меня так и не удовлетворила: работа с media queries. Меня не устраивало то, что правила были или оторваны от контекста, но собраны в одном файле, или находились в контексте, но были разбросаны по разным файлам.

Эта неудовлетворенность заставила подробнее изучить SASS, который в версии 3.2 стал позволять конструкции (которые работают и с media queries) вида:

@mixin ie6 { * html & { @content } }

#logo {
  background-image: url("/images/logo.png");
  @include ie6 { background-image: url("/images/logo.gif"); }
}

Главное здесь — использование переменной @content. Таким образом можно здорово упростить работу с адаптивным дизайном, используя его в нужном контексте. Не знаю, умеет ли так Stylus, но LESS точно не умеет.

Графический интерфейс я променял на командную строку, так как sass и compass имеют замечательную команду watch, автоматически отслеживающую изменения во всех файлах (в том числе и включенных через @import) и компилирующую CSS при сохранении.

Кроме того, SASS имеет крутую библиотеку Compass, которая кроме набора полезных примесей (которые можно взять из stylus/nib или less/bootstrap) умеет автоматически генерировать спрайты. Причем делает это не самое приятное занятие (нарезку спрайтов) действительно простым и удобным.

Да, LESS имеет поддержку в виде вездесущего фреймворка Bootstrap. Но у SASS тоже есть неплохой (хоть и менее известный) аналог: Zurb Foundation. В свое время зурбовские сетки мне нравились даже больше бутстраповских. Конечно, чтобы воспользоваться этими фреймворками на 100%, нужно скачать исходники в виде LESS/SASS, а не скомпилированный CSS.

Думаю, Stylus стоит изучить получше, так как его многие рекомендуют, но пока меня устраивает SCSS. Кроме того, свободный синтаксис Stylus меня несколько смущает. В любом случае, если вы еще не попробовали хоть какой-нибудь препроцессор, рекомендую вам это сделать, так как после них возвращаться к старому-доброму «чистому» CSS уже не захочется.