От автора: уже было множество статей на тему PostCSS, но до сих пор многие так и не поняли, что это такое. В двух словах: PostCSS выполняет утомительную работу за вас. PostCSS немного отличается от препроцессоров Sass, Less и Stylus, чей синтаксис выглядит более лаконичным и компилируется в обычный CSS код.
Людей смущает:
Название. PostCSS может выполнять различные действия над файлами до или после того, как их исходный код будет скомпилирован препроцессором.
PostCSS вполне может заменить препроцессор. Есть плагины, в которых реализованы такие конструкции, как переменные, вложенность, миксины и наследование.
Препроцессор можно сделать и самому, но зачем. Причиной может послужить только, если вы хотите уменьшить функционал и ускорить время компиляции. Лично я использую Sass и потом PostCSS.
Как работать с PostCSS?
PostCSS может работать, как в независимых JS файлах, так и при помощи таскраннеров Gulp, Grunt, Broccoli, Brunch и еще масса, о которых я даже не слышал!
Сам по себе PostCSS всего лишь парсит CSS файл на JS объекты и токены. Настоящая магия творится с плагинами, которые анализируют, манипулируют, добавляют или изменяют свойства и значения еще до того, как конечный CSS файл будет написан.
Для работы с PostCSS в Gulp необходимо создать проект и установить оба модуля:
|
1 2 |
npm init npm install --save-dev gulp gulp-postcss |
Потом можно добавить нужные вам плагины, к примеру, autoprefixer и cssnano:
|
1 |
npm install --save-dev autoprefixer cssnano |
Можно создать файл gulpfile.js – в нем прописывается задача по загрузке исходного CSS и прогонке его в PostCSS. Плагины и любые опции передаются в PostCSS в массиве. И в конце CSS код выводится в конечный файл:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
// Gulp.js настройки var gulp = require('gulp'), postcss = require('gulp-postcss'); // подключение PostCSS плагинов gulp.task('css', function() { return gulp.src('src/main.css') .pipe(postcss([ require('autoprefixer')({}), require('cssnano') ])) .pipe(gulp.dest('dest/main.css')); }); |
Задачу можно запустить через консоль:
|
1 |
gulp css |
Теперь осталось рассмотреть PostCSS плагины…
Autoprefixer
Если вы ничем не пользуетесь, установите Autoprefixer:
|
1 |
npm install --save-dev autoprefixer |
Вендорные префиксы -webkit-, -moz- и -ms- постепенно отмирают с увеличением поддержки, и производители браузеров переходят на другой способ введения новых свойств – активация свойств при помощи флагов. К сожалению, отказаться от вендорных префиксов пока не представляется возможным, но и знать все случаи, где они нужны, тоже нереально (например, user-select), где они нужны, но не везде (3D трансформации) или вообще не нужны (border-radius).
С Autoprefixer вы забудете о вендорных префиксах. От вас нужно только указать свойства, к которым не нужно добавлять префиксы и задать браузеры. Autoprefixer проверит поддержку свойств на caniuse.com прежде, чем добавлять префиксы. Код ниже описывает 2 последние версии любого известного браузера, или браузера с долей на рынке больше 2%:
|
1 2 3 4 5 |
.pipe(postcss([ require('autoprefixer')({ browsers: ['last 2 versions', '> 2%'] }) ])) |
Отличный вариант для функций препроцессоров, в которых обычно требуется написание специального кода и отдельное применение префиксов. В будущем с развитием стандартов браузеров код с префиксами будет удален из PostCSS.
Autoprefixer настолько полезный инструмент, что из-за его большой распространенности вы могли его уже использовать и не знать, что это PostCSS плагин.
PostCSS Assets
PostCSS Assets – набор полезных функций по обработке изображений:
|
1 |
npm install --save-dev postcss-assets |
Среди возможностей:
Замена URL: Учитывая имя файла, PostCSS заменяет resolve(image) на корневой путь или полный URL.
Обработка разрешения: PostCSS Assets заменяет width(image), height(image) или size(image) на их пиксельные эквиваленты.
Обработка изображений: PostCSS Assets заменяет inline(image) на строку в кодировке Base64.
Очистка кэша: PostCSS Assets может добавлять случайную строку запроса в конец ссылки на изображение для проверки того, что был загружен последний файл.
cssnext
С cssnext вы можете пользоваться новейшим синтаксисом CSS уже сегодня.
|
1 |
npm install --save-dev postcss-cssnext |
В плагине длинный список возможностей, среди которых поддержка:
Var переменные
#rrggbbaa цвета
Цветовые функции
Фильтры
Фолбэки
Во время работы cssnext переводит код на синтаксис, который сегодня используется в браузерах.
Rucksack
Rucksack предлагает ряд функций, которые по словам разработчиков делают CSS разработку снова веселой!
|
1 |
npm install --save-dev rucksack-css |
Адаптивная типографика, в которой размер шрифта и высота строки настраиваются всего одной строкой font-size: responsive.
Количественные псевдоселекторы типа li:at-least(4), рассчитанные на любые списки с 4 или более пунктами.
Псевдонимы свойств. К примеру, объявление свойства background через bg.
Набор готовых функций анимации.
Stylelint
На основе 140 правил Stylelint сообщает об ошибках в CSS. Плагин создан для сообщения об ошибках, применения стилей и общего усиления лучших практик. Stylelint можно настроить по-разному – статья от Pavels Jelisejevs Повышаем качество вашего CSS кода с помощью PostCSS проведет вас по всему процессу настройки.
CSS MQPacker
По возможности MQPacker оптимизирует медиа запросы в одно правило:
|
1 |
npm install --save-dev css-mqpacker |
Препроцессоры типа Sass позволяют легко использовать медиа запросы внутри объявлений.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
.widget1 { width: 100%; @media (min-width: 30em) { width: 50%; } @media (min-width: 60em) { width: 25%; } } .widget2 { width: 100px; @media (min-width: 30em) { width: 200px; } } |
Компилируется в:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.widget1 { width: 100%; } @media (min-width: 30em) { .widget1 { width: 50%; } } @media (min-width: 60em) { .widget1 { width: 25%; } } .widget2 { width: 100px; } @media (min-width: 30em) { .widget2 { width: 200px; } } |
Для уменьшения размера файла и повышения скорости парсинга (возможно) MQPacker запаковывает несколько медиа запросов в одно правило @media, т.е.
|
1 2 3 4 5 6 7 8 9 10 11 |
.widget1 { width: 100%; } .widget2 { width: 100px; } @media (min-width: 30em) { .widget1 { width: 50%; } .widget2 { width: 200px; } } @media (min-width: 60em) { .widget1 { width: 25%; } } |
Совет: проверьте, чтобы в первом медиа запросе были заданы все возможные варианты именно в том порядке, в котором необходимо, даже если нет никакой разницы. В таком случае MQPacker создаст правила в правильном порядке.
MQPacker также умеет сортировать медиа запросы и выводить карты кода.
cssnano
Плагин cssnano максимально сжимает CSS файл. Установка:
|
1 |
npm install --save-dev cssnano |
Плагин удаляет комментарии, пробелы, одинаковые правила, устаревшие вендорные префиксы, а также проводит другие меры по оптимизации, что экономит как минимум 50% веса. Есть и другие плагины для оптимизации, но cssnano самый лучший.
Мало?
Найти PostCSS плагины можно на postcss.parts, в документации PostCSS описаны все рекомендуемые опции. По ссылкам выше вы найдете плагины для автоматизации любой CSS задачи, которую можно представить. Некоторые из плагинов выполняют несколько функций, к примеру, в cssnext есть Autoprefixer.
Если и этого мало, можно разработать свой собственный PostCSS плагин в JS. В документации PostCSS объясняется, как написать плагин, а также там есть API.
Пользуетесь ли вы препроцессорами или нет, PostCSS упрощает вам разработку. Сэкономленное время на разработке с лихвой окупает время, затраченное на установку и настройку.
Редакция: Craig Buckler
Источник: //www.sitepoint.com/
Редакция: Команда webformyself.
