Руководство по быстрому запуску PostCSS: изучение плагинов

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

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

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

Поиск плагинов

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

PostCSS Github Page

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

Каталог сайта postcss.parts

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

@postcss Twitter

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

Типы плагинов

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

пакеты

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

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

Например, пакет PreCSS объединяет девять отдельных плагинов PostCSS для создания Sass-подобных функций. Пакет cssnano использует около двадцати плагинов PostCSS для минимизации и оптимизации CSS. Используя эти пакеты, вы избавляете себя от необходимости устанавливать и загружать каждый из плагинов вручную.

Будущий синтаксис CSS

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

Например, вы можете захотеть использовать предстоящие восьми- или четырехзначные шестнадцатеричные обозначения для создания непрозрачных цветов. Чтобы создать слегка прозрачный синий цвет, вы можете использовать цветовой код, такой как #0000ffcc , или его сокращенную форму #00fc , и запустить плагин postcss-color-hex-alpha, чтобы преобразовать его в широко поддерживаемый формат rgba(0, 0, 100%, 0.8) .

Наиболее заметное присутствие в будущем CSS для PostCSS — это пакет cssnext , который предоставляет множество CSS-совместимых будущих спецификаций. Тем не менее, в настоящее время его разработчик Maxime Therouin проходит через серьезный переход в том, как он функционирует. В связи с этим мы будем настойчиво предлагать вам учебник по CSS, пока переход не будет завершен.

откаты

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

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

Например, вы можете добавить плоские цвета в качестве rgba() для rgba() с помощью плагина postcss-color-rgba или добавить совместимые с IE8 запасные варианты для opacity помощью плагина postcss-opacity . Наиболее известным из этих плагинов является Autoprefixer , который добавляет при необходимости префиксы поставщиков на основе данных с CanIUse.com.

Вы узнаете больше о резервных плагинах в следующем учебном пособии «Для кроссбраузерной совместимости» в этой серии.

Языковые расширения

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

Однако, поскольку PostCSS полностью гибок, существуют также языковые расширения, предлагающие функции, которые обычно не встречаются в препроцессорах. Например, плагин postcss-bem добавляет синтаксис специально для создания CSS, который следует методологии BEM / SUIT (подробнее об этом в следующем уроке). Плагин postcss-define-property позволяет вам создавать свои собственные свойства или переопределять собственные свойства. А плагин postcss-match позволяет вам использовать не только условные выражения , но и логику сопоставления с образцом в вашем коде.

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

Цвета

Многие из цветовых плагинов, доступных в настоящее время для PostCSS, имеют дело с преобразованием цветов из одного формата в другой, например из #hex.a в rgba() , hcl(H,C,L) в #rgb или pantone в #rgb . Кроме того, некоторые из наиболее полезных плагинов обрабатывают манипуляции с цветами, такие как смешивание двух цветов или масштабирование их яркости или темноты.

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

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

Изображения и шрифты

Эта категория плагинов выполняет множество задач по оптимизации, таких как упаковка данных Base64, создание листов спрайтов CSS и оптимизация SVG. Вы также найдете несколько других типов инструментов для работы с изображениями и шрифтами, таких как автоматическое преобразование SVG в PNG для IE8, автоматическое создание изображений WebP и включение для поддержки браузеров, ярлыки @font-face ярлыки поддержки Retina и многое другое.

Сетки

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

В настоящее время для PostCSS доступны три сеточные системы:

• Потерянный , созданный Кори Симмонсом
• postcss-grid , созданный Энди Янссоном
• postcss-опрятный , созданный Джо Асакурой

Оптимизации

Плагины оптимизации PostCSS делятся на две основные категории: минификация и модификация кода. С помощью этих плагинов вы можете выполнять задачи минимизации, такие как удаление пробелов и комментариев, а также выполнять более сложные модификации, такие как объединение соответствующих медиазапросов, вставка @import стилей @import , оптимизация весов шрифтов, удаление пустых или повторяющихся правил и так далее.

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

Ярлыки

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

Вы можете использовать сокращение для свойств, либо определяя свое собственное, либо используя существующее сокращение, например, w вместо width , h вместо height и так далее. Вы можете выводить код @font-face , transform код, треугольники и круги в одну строку каждый. Кроме того, вы можете создавать ярлыки для всех видов общих задач, включая стилизацию ссылок, центрирование, исправление ошибок, позиционирование, изменение размера, интервалы и вывод цветовых кодов.

Мы углубимся в эти плагины в учебнике «Ярлыки и сокращения».

Анализ и Репортеры

PostCSS также можно использовать не только для преобразования CSS, но и для обратной связи при разработке CSS. Некоторые из доступных плагинов для анализа и отчетности включают в себя линтер для кода BEM / SUIT, плагин, который даст вам разбивку вашего кода с помощью CSSstats, «DoIUse», чтобы вы знали, как ваш код соответствует данным из «Могу ли я использовать», и генератор файлов Modernizr.

другие

Есть несколько замечательных плагинов PostCSS, которые не совсем вписываются в определенную категорию, но слишком хороши, чтобы их игнорировать. Например, у нас есть postcss-style-guide, который автоматически генерирует руководство по стилю на основе вашего CSS. Есть также плагин rtlcss , используемый WordPress, который генерирует версию таблицы стилей справа налево.

Мы расскажем о некоторых из этих замечательных плагинов в руководстве «Разные вкусности».

Веселье

Категория «развлечения» включает в себя такие драгоценные камни, как postcss-spiffing, который позволяет использовать правописание в Великобритании, например, colour вместо color , и хорошо продуманный синтаксис, такой как « !please вместо !important .

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

Последовательность выполнения плагина

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

Например, вы можете использовать плагин типа postcss-simple-vars, который добавляет поддержку переменных, и вы можете использовать его для хранения значения rgba() следующим образом:

Вы также можете использовать плагин, такой как postcss-color-rgba-fallback, чтобы добавить плоский шестнадцатеричный код в качестве запасного, давая вам:

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

Если вы сначала запустите резервный плагин, он просто найдет background: $color; в вашем CSS и не знаю, было ли значение rgba() для работы с ним.

Однако, сначала запустив плагин переменных, при запуске резервного плагина он найдет background: rgba( 0, 0, 0, 0.5); и идти вперед и добавить требуемый запасной вариант.

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

Давайте подведем итоги

Подводя итоги изучения плагинов PostCSS:

• Найти плагины в репозитории PostCSS Github и postcss.parts
• Оставайтесь с нами на @PostCSS, чтобы узнать о новых плагинах
• Пакеты плагинов позволяют вам устанавливать несколько плагинов с одинаковой темой
• Плагины PostCSS делятся на множество различных категорий
• Загружая выбранные плагины, обязательно учитывайте их последовательность выполнения

В следующем уроке

Мы завершили наше «Краткое руководство» по PostCSS и готовы приступить к практическим занятиям и приступить к созданию некоторого реального кода CSS.

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

Увидимся в следующем уроке!