Зачем нужен PostCSS

Когда я публикую в FW какой-либо материал о PostCSS, в комментариях сразу начинается срач в духе «да зачем вообще нужен этот PostCSS, есть же препроцессоры!», «PostCSS вообще лажа, не понимаю, почему вокруг него подняли такой шум». Все эти комментарии пишут люди, до конца не понимающие суть задач, которые должен решать PostCSS. Однако каждый из них спешит поделиться своим мнением и рассказать всему миру, что PostCSS — это какая-то ненужная дичь, которую нам пытаются тщательным образом впарить. В этой заметке я попробую «на пальцах» объяснить, чем PostCSS лучше препроцессоров и вообще зачем он нужен.

Также читайте моё интервью с Андреем Ситником, в котором мы поговорили об истории создания PostCSS, применении PostCSS в разработке и о планах проекта на будущее.

На самом деле всё довольно просто. Почему появились препроцессоры? Разработчикам не хватало возможностей, предусмотренных спецификацией CSS. Никто не любит выполнять рутинную работу, и верстальщики — не исключение. Препроцессоры дают нам замечательные возможности по ускорению и упрощению написания CSS: это переменные, вложенные блоки кода, инклуды, примеси и многое другое. Всё вроде бы круто, но проблема в том, что набор возможностей препроцессоров фактически перестал пополняться. Что год назад, что сейчас мы используем одни те же возможности препроцессоров. Развития никакого нет. Более того, все основные препроцессоры (Sass/Less/Stylus) по большему счёту ничем и не отличаются, кроме синтаксиса. Готов поспорить, что через год в препроцессорах не появится ничего принципиально нового.

Если мыслить в плоскости препроцессоров, то мы достигли вершины возможностей. Но PostCSS кардинально отличается от препроцессоров. Нельзя сравнивать PostCSS и препроцессоры, рассматривая PostCSS как ещё один препроцессор.

Что такое PostCSS? Это парсер. Просто парсер стилей. Он ничего не делает кроме того, что получает на входе написанные вами стили и разбирает их на составляющие, а затем собирает обратно. Вот между этими двумя этапами вклиниваются плагины для PostCSS, которые и выполняют всю полезную работу.

PostCSS создан для того, чтобы преобразовывать стили нужным нам образом. Преобразованием стилей занимаются плагины. Плагин берёт разобранный на составляющие код, который ему передал PostCSS, и как-то его обрабатывает. Самый простой пример, знакомый всем — это Автопрефиксер. Он получает на входе ваши стили, ищет в них плохо поддерживаемые свойства. Как только он находит такое свойство — скажем, display: flex; — он идёт на caniuse.com и ищет информацию о том, какие браузеры понимают это свойство только с префиксами. Если вы изначально указали в настройках, что вам нужно поддерживать эти браузеры, он добавляет в ваши стили то же самое свойство display: flex, но уже с нужными префиксами. Далее он обратно передаёт модифицированный код в PostCSS, и тот собирает его обратно в обычный CSS. Такова суть работы плагинов.

Если препроцессоры предоставляют нам строго ограниченный набор возможностей, то PostCSS даёт полную свободу. Вы можете использовать как готовые плагины (которых, к слову, уже довольно много), так и свои собственные. Написать плагин не составит труда, если вы программируете на JavaScript.

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

С PostCSS отпадает смысл использовать препроцессоры. Если вам требуется вложенность — подключите нужный плагин и сможете её использовать. Переменные, циклы, инклуды — всё это уже реализовано и доступно для использования прямо сейчас. Но всё это не так интересно, ведь это уже пройденный с препроцессорами этап. PostCSS предоставляет нам гораздо более интересные возможности. Например, чтобы не инлайнить картинки в CSS вручную, можно лишь указать путь к картинке, и плагин для PostCSS сам заинлайнит её. Но это всё мелочи. С помощью CSS-модулей PostCSS позволяет добиться полной изоляции стилей для каждого компонента на странице. Если без этого плагина вы не могли использовать два одинаковых класса на странице для стилизации разных компонентов, то с этим плагином можно благополучно забыть о проблеме конфликта имён классов. Хорошее применение такой плагин может найти и в вёрстке встраиваемых виджетов, подключаемых на разных сайтах. Это позволит избежать конфликтов стилей виджета со стилями сайта.

Короче говоря, на PostCSS можно самому написать свой препроцессор с блекджеком и куртизанками кучей новых фич. Возможности ограничены лишь вашей фантазией. Благодаря большому количеству плагинов можно даже не писать ничего своего, а сразу использовать готовое. На PostCSS можно делать всё — от модульных минификаторов до CSS на русском.

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

Share
Send
11 comments
Николай Громов

С PostCSS отпадает смысл использовать препроцессоры.

это вот, откровенная чушь, прямо скажем. )

Андрей Романов

Почему же? :)

Какой смысл использовать препроцессоры вместе с PostCSS, если если плагины вроде precss, в которых реализованы возможности препроцессоров?

Единственная причина, которую я вижу — это если ваша разработка сильно завязана на использовании сторонних библиотек с миксинами или чем-то подобным.

Николай Громов

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

Des

Вы так пишите, какбудто у препроцессоров нет плагинов, они тоже являются парсерами и тоже расширяют свой функционал за счет autoprefixer, cssmin, etc. Приведите сравнение возможностей техже stylus, sass и PostCSS.

Андрей Романов

Нет, вы не правы. Они не расширяют свой функционал, у них нет плагинов.

В основе Автопрефиксера лежит PostCSS. Автопрефиксер, cssmin — это всё отдельные плагины, никак не связанные с препроцессорами.

Артем

Все что Вы описали уже есть в препроцессорах, смысл мне переходить допустим с SCSS на PostCSS?

Андрей Романов

Если ваши потребности полностью покрываются препроцессорами, то смысла переходить на PostCSS нет.

«Всё, что вы описали уже есть в препроцессорах» — CSS-модули есть в препроцессорах?

le-genda

Какая-то высосанная из пальца статья ни о чем. Ни разу не убедил даже посмотреть на этот PostCSS, не то что его использовать..

Дамир Саяхов

ЭТА НЕ СПАМ!!!!11
Краткий пересказ.

  • Зачем нужен PostCSS?
  • Потому что он отличается от препроцессоров
  • Чем отличается?
  • НУ там плагины прикалюшки
  • У меня всё это есть в гапле. Так зачем мне нужен PostCSS?
  • Ну прикольно же. Все используют препроцессоры, а ты PostCSS. Не как все считай.
  • А чем он лучше LESS?
  • Тем что он не такой как LESS?
  • А зачем мне его тогда использовать?
  • Просто)))0
Андрей Романов

Зачем нужен PostCSS? Затем, что он быстрый и модульный. Для него можно писать собственные плагины, а для препроцессоров нельзя.

Анон

Думаю, что постпроцессоры не нужны. Достаточно препроцессоров и галповского автопрефиксера.

26

В инете нет ни одной статьи про PostCSS, в комментах которой не начался бы срач

Пам пам

Есть миллион крутых плагинов для gulp, и он покрывает все потребности. Смысла переходить на postCSS вообще нет.

Черити

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

Андрей Романов

Вы, должно быть, не понимаете, что gulp решает несколько другие задачи, чем препроцессоры.

Максим М.

Сегодня познакомился с PostCSS, пожалуй можно с радостью попрощаться с SASS и многими Gulp-плагинами.
С PostCSS можно использовать кастомные свойства CSS, в LESS, SASS этого не сделать.
Конечно, Gulp и препроцессоры решают многие задачи по автоматизации, но Gulp и PostCSS делают это гораздо гибче.
А насчёт “нужно это или нет”, ну кому-то нужна сетка Bootstrap, а кто-то отказался от неё и решает этот вопрос гибче.
Не стоит зловония пускать, если вам это не нравится или не хочется изучать новое.
С вами делятся информацией, будьте вежливы.
Автору благодарность за статью!

Your comment
won’t be published

HTML will not work

Ctrl + Enter
Popular