Глубокое погружение в PostCSS: Что вам следует знать (введение)

Если бы была одна единственная вещь, которую вам действительно стоит знать о PostCSS, это был бы тот факт, что вы должны выучить, что он собой представляет, и как использовать его ASAP.

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

Введение в PostCSS

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

В 2014 году количество скачиваний составляло чуть меньше 1,4 миллиона за год, а с января по июнь 2015 года количество скачиваний составило более 3,8 миллионов. Autoprefixer, крайне популярный плагин PostCSS, используется в Google, Shopify, Twitter, Bootstrap и CodePen. В WordPress также используется Autoprefixer, а также плагин RTLCSS. На сайте Alibaba используются несколько плагинов PostCSS, кроме того, они разработали свои собственные плагины и внесли свою лепту в другие проекты плагинов.

Помимо этого, Марк Отто сказал о 5 версии Bootstrap, написанной на PostCSS: \"Кстати, Bootstrap 4 сделан на SCSS. И если вам интересно, 5 версия, скорее всего, будет на PostCSS, потому что это реально круто\"

PostCSS только что был интегрирован в CodePen.io и может использоваться линейно, если выбрать его в настройках.

PostCSS растет, и растет быстро. И на это есть свои причины.

PostCSS в Nutshell

Так что же представляет собой PostCSS? Самое лучшее определение приведено на собственной странице проекта на GitHub:

PostCSS это инструмент для трансформирования CSS с помощью плагинов JS. Эти плагины могут поддерживать переменные и примеси, компилировать будущий синтаксис CSS, выстраивать изображения и пр.

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

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

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

Чем PostCSS не является

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

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

Поэтому, прежде чем пойти дальше, давайте уточним несколько моментов относительно того, чем PostCSS не является.

PostCSS это не препроцессор

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

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

PostCSS это не пост-процессор

PostCSS включает слово \"пост\" в названии, но на самом деле он не является \"постпроцессором\". Постпроцессинг в основном означает, что берется готовая таблица стилей, включающая в себя верный/стандартный синтаксис CSS, и обрабатывается для того, чтобы, например, добавить префиксы разработчика. При этом использование PostCSS не ограничено только такими задачами. Как уже упоминалось ранее, он может вести себя также как препроцессор.

Пришло время признать свою ошибку. Термин \"постпроцессор\" не подошел. Команда PostCSS перестала его использовать.

Андрей Ситник, создатель PostCSS

Как успешный участник разработки PostCSS и разработчик плагинов, Максим Тируэн описал в твиттере, что \"пост\" в PostCSS скорее относится не к постпроцессингу, а означает \"CSS и прочее\".

PostCSS - это не \"синтаксис будущего\"

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

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

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

PostCSS это не инструмент для очистки/оптимизации

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

Да, в нем есть огромное количество плагинов, которые предлагают отличные процессы очистки и оптимизации, но это всего лишь капля в море того, что он предлагает.

PostCSS это не что-то одно

Самое привлекательное в PostCSS это то, что он не ограничен каким-либо одним видом функционала; он представляет собой полностью настраиваемый набор функций, который потенциально не ограничен.

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

В случае с PostCSS, вы можете думать, что это что-то вроде хлеба, из которого вы делаете бутерброд. Сам по себе он не имеет особого смыла, но именно таким он должен быть, и эта его \"пустота\" и обуславливает его потенциал. Это пространство для безграничного разнообразия начинок, которое позволяет создать нечто удивительное. Попробовали бутерброд с арахисовым маслом и вам не понравилось? Это же не причина отказываться от хлеба и всех известных видов бутербродов навсегда. Вместо этого попробуйте новую начинку, и возможно вы найдете то, что станет идеальной частью вашей повседневной жизни.