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

Продолжаем рассказ о PostCSS, который мы начали в предыдущей статье.

PostCSS это абсолютно другой подход к CSS. Один фронтенд-разработчик описал его как швейцарский нож для создания CSS , и это невероятно точное описание.

Давайте рассмотрим несколько моментов, которые делают PostCSS таким особенным.

Его экосистема плагинов предлагает разнообразный функционал

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

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

Есть плагины возврата для создания унаследованного синтаксиса, например, для добавления шестнадцатеричных возвратов цветов rgba(), добавления фильтров прозрачности для IE8, конвертирования селекторов псевдо-элементов для IE8 и генерирования возвратов px для единиц rem.

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

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

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

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

Он модульный; пользуйтесь только тем, что вам нужно

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

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

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

Он быстрый: увеличивает скорость до 3 раз

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

Можете сами проверить эти показатели с помощью https://github.com/postcss/benchmark

Результат одного из таких анализов, в ходе которого тестировался парсинг, вложенные правила, примеси, переменные и математика, показал следующее:

• PostCSS: 36 мс
  
  • Rework: 77 мс(в 2.1 раза медленнее)
    
  • libsass: 136 мс(в 3.8 раза медленнее)
    
  • Less: 160 мс(в 4.4 раза медленнее)
    
  • Stylus: 167 мс(в 4.6 раза медленнее)
    
  • Stylecow: 208 мс(в 5.7 раз медленнее)
    
  • Ruby Sass: 1084 мс(в 30.1 раз медленнее)

Вы можете создавать свои собственные плагины для чего угодно

Плагины PostCSS пишутся на JavaScript, а потому любой, кто может писать на JavaScript, может создать плагин для любой цели. Чтобы вы поняли, я не считаю себя опытным JavaScript-девелопером, но, разобравшись с PostCSS, я смог создать свой полностью рабочий плагин всего за несколько часов. Проекты препроцессоров, такие как Stylus, Sass и LESS, работают неплохо, но они не могут справляться абсолютно со всем. Им приходится решать, какие функции лучше всего подойдут их базе пользователей в целом. Если есть функции, которые вы бы хотели получить, вы можете сделать запрос на функции, но его могут не посчитать соответствующим более широким потребностям проекта.

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

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

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

Вы можете использовать его вместе с обычным CSS

Большая часть плагинов PostCSS не требуют использования специального синтаксиса, как это обычно случается с препроцессорами. Вместо этого, их можно использовать с обычным CSS. Это означает, что вы можете использовать PostCSS с любым CSS-файлом, который у вас найдется, таким как готовая таблица стилей из фронтенд-шаблона, из чужого проекта или, например, файл Normalize.css.

Это также означает, что вам не придется отказываться от проектов, в которых используется определенный препроцессор, будь то Stylus, Sass или LESS, так как вы всегда можете применить PostCSS к скомпилированному CSS. Например, если вы используете Foundation через Sass, вы можете запустить плагины оптимизации и синтаксиса будущего после того, как сгенерируете CSS-файлы проекта.

Библиотеки PostCSS не привязаны к одному препроцессору

Также мы начали встречать целые библиотеки, построенные на PostCSS, которые раньше могли писаться на Stylus, Sass или LESS.Например, Кори Симмонс изначально одновременно поддерживал версии для Stylus и Sass для его системы распределения вычислений Lost, так, чтобы пользователи обоих препроцессоров могли получить доступ. Впоследствии он перенес свой проект на PostCSS, что означает, что теперь Lost могут использовать все, включая пользователей Stylus и Sass, а также пользователей LESS и тех, кто вообще не работает с препроцессорами.

Он идеально развертывается с популярными инструментами

Так как PostCSS основан на JavaScript, для него не требуется устанавливать Ruby, и он уже сразу же интегрирован с несколькими инструментами разработки.

• В него включены плагины для Grunt, Gulp, webpack, Broccoli, Brunch и ENB.
  
  • CodePen позволяет встраивать PostCSS.
    
  • Prepros включает встроенную поддержку плагинов Autoprefixer и cssnext.
    
  • Плагин postcss-use позволяет легко скачивать другие плагины с простыми правилами @ в CSS.
    
  • Можно использовать файл package.json , чтобы npm мог автоматически устанавливать любые плагины PostCSS, используемые проектом, с помощью команды в два слова: npm install. Это позволяет проще распространять проекты PostCSS, несмотря на большое количество возможных вариантов настройки плагинов.

Мы поговорим о том, как можно настроить PostCSS, в нашей следующей статье.

Коротко о главном

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

В введении мы поняли, что PostCSS НЕ является:

• Препроцессором, хотя может выполнять его функции;
  
  • Постпроцессором, хотя может выполнять его функции;
    
  • Инструментом для создания синтаксиса будущего , хотя он может упростить поддержку синтаксиса будущего;
    
  • Инструментом для очистки/оптимизации, хотя может предоставлять такой функционал;
    
  • Чем-то одним; он представляет собой потенциально неограниченный функционал, который вы можете настроить по своему желанию.

Также мы рассмотрели, что делает PostCSS особенным:

• Разнообразные функциональные возможности, доступные через экосистему плагинов;
  
  • Модульность, которая позволяет использовать только то, что вам нужно;
    
  • Высокая скорость компиляции;
    
  • Возможность создавать свои собственные плагины;
    
  • Возможность использовать его с обычным CSS;
    
  • Возможность создавать библиотеки, которые не зависят от одного конкретного препроцессора;
    
  • Идеальное развертывание с множеством популярных инструментов.

О чем еще мы планируем написать:

• Варианты быстрой настройки;
  
  • Настройка Gulp;
    
  • Настройка Grunt;
    
  • Обзор плагинов;
    
  • Кроссбраузерная совместимость;
    
  • Минимизация и оптимизация;
    
  • Препроцессинг с помощью PreCSS;
    
  • Создание собственного препроцессора;
    
  • Сочетание со Stylus / Sass / LESS;
    
  • Метод BEM / SUIT для CSS;
    
  • Сокращения и условные обозначения;
    
  • Различные фишки PostCSS.

И, в конечном итоге, мы научим вас создавать собственные базовые плагины PostCSS.