Постпроцессоры CSS для начинающих: советы и ресурсы

Постпроцессоры CSS для начинающих: советы и ресурсы

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

Постпроцессоры – это относительно новый инструмент, работающий схожим образом с препроцессорами в том плане, что постпроцессоры влияют на процесс разработки. Тем не менее, работают данные инструменты с другой стороной CSS разработки.

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

Постпроцессоры или препроцессоры

С появлением Sass/LESS произошла революция в препроцессорах. Эти инструменты позволяют разработчикам использовать переменные, циклы, функции и миксины в CSS коде. Стандартный CSS превращается в почти полноценный язык программирования с расширенным функционалом.

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

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

Постпроцессоры CSS для начинающих: советы и ресурсы

Ниже я привел цитату из поста, откуда также взято это изображение. Я думаю, Стефан Баумгартнер превосходно объясняет разницу. «Препроцессоры используют язык, который компилируется в CSS. А постпроцессоры реставрируют CSS код так, чтобы он работал наилучшим образом в современных браузерах.»

В некотором роде, оба инструмента относятся к автоматизации, просто способы разные. К примеру, постпроцессоры решают самую назойливую проблему – автоматическое добавление вендорных префиксов к новым свойствам CSS3.

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

Чисто теоретически, в этом есть смысл, но сообщество разработчиков пока что продолжает разделять два инструмента. По этой причине советую front-end разработчика хотя бы прочитать про постпроцессоры и знать, что с их помощью можно делать.

Подключаем постпроцессор

Почти все в постпроцессинге предпочитают использовать PostCSS. Однако сама команда разработчиков призналась в Twitter, что хочет поменять название, так как в двух словах уже нет смысла.

PostCSS больше не просто пре- или постпроцессор. Он работает в обе стороны! Это объясняет цитату, которую мы видели выше, что все CSS инструменты сводятся к одному – к процессорам.

Постпроцессоры CSS для начинающих: советы и ресурсы

PostCSS использует JS плагины для автоматизации процесса работы с CSS. Вы даже можете писать свои JS плагины и расширять библиотеку PostCSS. Если хотите ознакомиться с PostCSS, пройдите вводный урок на Smashing Magazine. Если вы уже знаете, что такое Sass, то вы быстро разберетесь.

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

автоматическое добавление префиксов в CSS градиентах;

автоматическая организация CSS правил;

вставка полифилов для отдельных свойств;

генерация размеров изображений для фона.

Обратите внимание, что все это можно решить как в препроцессорах, так и в постпроцессорах. Важно понять, что пре- и постпроцессинг в CSS быстро сливается в одно.

Не разбивайте цели на разные этапы обработки, лучше составьте список целей и подбирайте под них правильные инструменты.

ТОП постпроцессоров

В этом разделе я старался не упоминать о расширениях, слишком много их в Sass и PostCSS. Если честно, можно было бы обойтись и этими библиотеками, но я хочу показать вам альтернативы для более специфичных решений.

Pleeease

Если вы работаете с Node.js, вам не обойтись без Pleeease. В нем много стандартных функций по обработке CSS, таких как импорт файлов, переменные/функции, автоматическая минификация, а также поддержка фолбэков для новых элементов типа SVG.

Постпроцессоры CSS для начинающих: советы и ресурсы

На сайте есть интерактивная площадка, где можно попробовать библиотеку онлайн без загрузки.

Bless

Я помню времена, когда IE6 был полной засадой. Приятно понимать, что разработка под IE стала лучше, но ненамного. Я был бы счастлив сообщить вам, что IE полностью вышел из оборота, но это не так.

К счастью, есть Bless CSS – специальный инструмент, определяющий возможные проблемы с IE в стилях и создающий решения с помощью постпроцессинга. Bless работает на Node.js и хорошо подходит под NPM/Gulp.

Постпроцессоры CSS для начинающих: советы и ресурсы

CSSNext

Очень крутая библиотека, с помощью которой можно создавать в CSS продвинутый функционал, который еще не поддерживается. CSSNext активирует поддержку таких CSS4 функций, как gray(), которая на данный момент представлена только в W3C черновиках.

Постпроцессоры CSS для начинающих: советы и ресурсы

На мой взгляд, эта библиотека не для всех. Это уникальная библиотека, решающая нестандартные задачи. Но в ней вы можете поиграться с новыми свойствами CSS4, которые пока что конвертируются в подходящий синтаксис на CSS3.

Stylecow

Если ваша главная проблема – это поддержка в браузере, вам нужен Stylecow. Это мощная библиотека, позволяющая писать CSS код чисто под ваш любимый браузер. Потом вы можете открыть командную строку через Node, и ваш CSS код обновится под все необходимые браузеры.

Загрузить Stylecow можно с GitHub, в комплекте с ним вы получите детальную документацию.

Постпроцессоры CSS для начинающих: советы и ресурсы

-prefix-free

И напоследок хочу поделиться библиотекой -prefix-free, еще одна любимая библиотека для CSS разработки. С ее помощью можно писать свойства без префиксов. Все хотят использовать современные CSS свойства типа анимации и градиентов, но никто не хочет копипастить код вручную.

С этим плагином вам даже не понадобится прогонять CSS код через постпроцессор на компьютере. Плагин также может работать в браузере пользователя и автоматически обновлять CSS файлы.

Постпроцессоры CSS для начинающих: советы и ресурсы

Для локального постпроцессинга, возможно, лучше выбрать Autoprefixer, который встроен в библиотеку PostCSS. Вот почему я говорил, что если вы используете LESS или Sass с PostCSS, то у вас будет все что необходимо для впечатляющей разработки на CSS.

Заключение

Постпроцессинг – это больше крылатая фраза, чем технология, несмотря на то, что он занимает свое место в CSS разработке. Весь процесс написания современного CSS кода радикально улучшился благодаря этим инструментам. Могу посоветовать только искать дальше, чтобы найти наиболее подходящий вам инструмент.

Автор: Jake Rocheleau

Источник: //www.hongkiat.com/

Редакция: Команда webformyself.

Метки:

Похожие статьи:

Комментарии Вконтакте: