От автора: о концепции препроцессоров в CSS большинство разработчиков или уже знают, или читало. Мы уже разобрали в мельчайших деталях препроцессоры, чтобы помочь разработчикам как можно быстрее освоиться с этой популярной технологией. Но что такое постпроцессоры?
Постпроцессоры – это относительно новый инструмент, работающий схожим образом с препроцессорами в том плане, что постпроцессоры влияют на процесс разработки. Тем не менее, работают данные инструменты с другой стороной CSS разработки.
В этой статье я познакомлю вас с основами постпроцессинга. Вы узнаете, как они работают, зачем их использовать, а также я поделюсь парочкой библиотек и инструментов, которые вам пригодятся.
С появлением Sass/LESS произошла революция в препроцессорах. Эти инструменты позволяют разработчикам использовать переменные, циклы, функции и миксины в CSS коде. Стандартный CSS превращается в почти полноценный язык программирования с расширенным функционалом.
После написания CSS кода в дело вступает постпроцессинг, автоматизирующий код. Это может быть расширение селекторов классов или автоматическое добавление вендорных префиксов к определенным свойствам.
Проще говоря, у препроцессоров есть свой язык стилей типа Sass и LESS, который конвертирует код в обычный CSS. Постпроцессоры берут этот CSS код и автоматизируют его.
Ниже я привел цитату из поста, откуда также взято это изображение. Я думаю, Стефан Баумгартнер превосходно объясняет разницу. «Препроцессоры используют язык, который компилируется в CSS. А постпроцессоры реставрируют CSS код так, чтобы он работал наилучшим образом в современных браузерах.»
В некотором роде, оба инструмента относятся к автоматизации, просто способы разные. К примеру, постпроцессоры решают самую назойливую проблему – автоматическое добавление вендорных префиксов к новым свойствам CSS3.
Однако то же самое можно сделать в Sass с помощью расширений. Так в чем же разница? Вот еще одна хорошая цитата из того поста: «Не бывает препроцессоров и постпроцессоров. Все это CSS процессоры, отвечающие за написание и оптимизацию.»
Чисто теоретически, в этом есть смысл, но сообщество разработчиков пока что продолжает разделять два инструмента. По этой причине советую front-end разработчика хотя бы прочитать про постпроцессоры и знать, что с их помощью можно делать.
Почти все в постпроцессинге предпочитают использовать PostCSS. Однако сама команда разработчиков призналась в Twitter, что хочет поменять название, так как в двух словах уже нет смысла.
PostCSS больше не просто пре- или постпроцессор. Он работает в обе стороны! Это объясняет цитату, которую мы видели выше, что все CSS инструменты сводятся к одному – к процессорам.
PostCSS использует JS плагины для автоматизации процесса работы с CSS. Вы даже можете писать свои JS плагины и расширять библиотеку PostCSS. Если хотите ознакомиться с PostCSS, пройдите вводный урок на Smashing Magazine. Если вы уже знаете, что такое Sass, то вы быстро разберетесь.
Чтобы построить свой рабочий процесс по пре- или постпроцессингу, сначала создайте список проблем:
автоматическое добавление префиксов в CSS градиентах;
автоматическая организация CSS правил;
вставка полифилов для отдельных свойств;
генерация размеров изображений для фона.
Обратите внимание, что все это можно решить как в препроцессорах, так и в постпроцессорах. Важно понять, что пре- и постпроцессинг в CSS быстро сливается в одно.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее
Не разбивайте цели на разные этапы обработки, лучше составьте список целей и подбирайте под них правильные инструменты.
В этом разделе я старался не упоминать о расширениях, слишком много их в Sass и PostCSS. Если честно, можно было бы обойтись и этими библиотеками, но я хочу показать вам альтернативы для более специфичных решений.
Если вы работаете с Node.js, вам не обойтись без Pleeease. В нем много стандартных функций по обработке CSS, таких как импорт файлов, переменные/функции, автоматическая минификация, а также поддержка фолбэков для новых элементов типа SVG.
На сайте есть интерактивная площадка, где можно попробовать библиотеку онлайн без загрузки.
Я помню времена, когда IE6 был полной засадой. Приятно понимать, что разработка под IE стала лучше, но ненамного. Я был бы счастлив сообщить вам, что IE полностью вышел из оборота, но это не так.
К счастью, есть Bless CSS – специальный инструмент, определяющий возможные проблемы с IE в стилях и создающий решения с помощью постпроцессинга. Bless работает на Node.js и хорошо подходит под NPM/Gulp.
Очень крутая библиотека, с помощью которой можно создавать в CSS продвинутый функционал, который еще не поддерживается. CSSNext активирует поддержку таких CSS4 функций, как gray(), которая на данный момент представлена только в W3C черновиках.
На мой взгляд, эта библиотека не для всех. Это уникальная библиотека, решающая нестандартные задачи. Но в ней вы можете поиграться с новыми свойствами CSS4, которые пока что конвертируются в подходящий синтаксис на CSS3.
Если ваша главная проблема – это поддержка в браузере, вам нужен Stylecow. Это мощная библиотека, позволяющая писать CSS код чисто под ваш любимый браузер. Потом вы можете открыть командную строку через Node, и ваш CSS код обновится под все необходимые браузеры.
Загрузить Stylecow можно с GitHub, в комплекте с ним вы получите детальную документацию.
И напоследок хочу поделиться библиотекой -prefix-free, еще одна любимая библиотека для CSS разработки. С ее помощью можно писать свойства без префиксов. Все хотят использовать современные CSS свойства типа анимации и градиентов, но никто не хочет копипастить код вручную.
С этим плагином вам даже не понадобится прогонять CSS код через постпроцессор на компьютере. Плагин также может работать в браузере пользователя и автоматически обновлять CSS файлы.
Для локального постпроцессинга, возможно, лучше выбрать Autoprefixer, который встроен в библиотеку PostCSS. Вот почему я говорил, что если вы используете LESS или Sass с PostCSS, то у вас будет все что необходимо для впечатляющей разработки на CSS.
Постпроцессинг – это больше крылатая фраза, чем технология, несмотря на то, что он занимает свое место в CSS разработке. Весь процесс написания современного CSS кода радикально улучшился благодаря этим инструментам. Могу посоветовать только искать дальше, чтобы найти наиболее подходящий вам инструмент.
Автор: Jake Rocheleau
Источник: http://www.hongkiat.com/
Редакция: Команда webformyself.
В Unity используется производительный язык программирования C#. Благодаря C# и Mono – кроссплатформенной реализации .NET,…