2016-09-17

PostCSS и все все все (оптимизация процесса верстки)

В начале 2016 года Microsoft официально объявила о прекращении поддержки своих старых IE. Текущими актуальными версиями браузеров компания начала считать IE11 и последнюю версию Edge.
Edge, судя по собственному опыту использования и сайтам наподобие html5test.com и caniuse.com, довольно таки неплох в плане поддержки современных стандартов. С IE11 частенько приходится еще "пободаться".
Для упрощения верстки уже давно используются различные фреймворки и сборщики CSS (LESS, SCSS и т.п.).
На одном из проектов решил познакомиться с PostCSS, а до этого склонялся к использованию bootstrap+scss.


PostCSS

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

Пример использования с gulp:

gulp.task('css', function () {
  var postcss = require('gulp-postcss');
  var sourcemaps = require('gulp-sourcemaps');

  return gulp.src('src/**/*.css')
    .pipe( sourcemaps.init() )
    .pipe( postcss([ require('autoprefixer'), require('precss')({ /* options */ }) ]) )
    .pipe( sourcemaps.write('.') )
    .pipe( gulp.dest('build/') );
});

Приведенный выше пример взят из официальной документации. На самом деле (на текущий момент 2016-09-17) он не идеально работает. Например, не отслеживаются вновь создаваемые файлы. Для более качественного слежения за файлами можно попробовать использовать gulp-watch. А для улучшения работы с потоками я использовал pump.

Рассмотрим некоторые полезные плагины.

Autoprefixer

https://github.com/postcss/autoprefixer
Популярный плагин. Добавляет к использованным стилям все необходимые вендорные префиксы. Можно настроить, чтобы учитывались определенные версии браузеров, например, указав, что только для двух последних версий.

PreCSS

Предоставляет некоторые возможности SASS.
По сути, является сборкой с настройками для следующего набора плагинов:

cssnext

http://cssnext.io/
Похож на PreCSS тем, что тоже группирует различные плагины с настройками и расширяет возможности стандартного CSS.
Позволяет использовать новые спецификации CSS, которые еще массово не поддерживаются браузерами. Среди них: переменные, вложенность, calc, кастомные свойства и медиа-запросы и другие.

Прочее

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

Полезные ссылки:
https://github.com/postcss/postcss - PostCSS на GitHub, есть примеры использования и упоминание некоторых полезных плагинов
http://postcss.parts/ - небольшой каталог плагинов PostCSS
https://github.com/postcss/postcss/blob/master/docs/plugins.md - список плагинов из документации
https://github.com/jjaderg/awesome-postcss - еще одна отправная точка для изучения и поиска плагинов