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

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

Цвета

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

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

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

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

Сетки

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

Для PostCSS на данный момент доступно три системы сеток:

• Lost, созданная Кори Симмонсом
  
  • postcss-grid, созданная Энди Дженссоном
    
  • postcss-neat, созданная Джо Асакура

Оптимизация

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

Сокращения

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

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

Анализ и Отчеты

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

Прочие

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

Для развлечения

Категория \"для развлечения\" включает такие удивительные плагины, как postcss-spiffing, который позволяет использовать британский английский, например, colour вместо color, и вежливый синтаксис, такой как !please вместо !important.

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

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

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

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

* исходный код */
$color: rgba( 0, 0, 0, 0.5);
.style {
    background: $color;
}
/* компиляция: */
.style {
    background: rgba( 0, 0, 0, 0.5);
}

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

/* компиляция: */
.style {
    background: #000;
    background: rgba( 0, 0, 0, 0.5);
}

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

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

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

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

Давайте повторим

Подведем итоги обзора плагинов PostCSS:

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