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

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

PostCSS

http://postcss.org/

Это инструмент для различных трансформаций 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

https://github.com/jonathantneal/precss

Предоставляет некоторые возможности SASS.

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

• postcss-partial-import: W3C and Sass-like imports
• postcss-mixins: Sass-like mixins
• postcss-advanced-variables: Sass-like variables and methods
• postcss-custom-selectors: W3C custom selectors
• postcss-custom-media: W3C custom media queries
• postcss-custom-properties: W3C custom variables
• postcss-media-minmax: W3C < <= >= > media queries
• postcss-color-function: W3C color methods
• postcss-nesting: W3C nested selectors
• postcss-nested: Sass-like nested selectors
• postcss-atroot: place rules back up to the root
• postcss-property-lookup: reference other property values
• postcss-extend: W3C and Sass-like extend methods
• postcss-selector-matches: W3C multiple matches pseudo-classes
• postcss-selector-not: W3C multiple not pseudo-classes

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 - еще одна отправная точка для изучения и поиска плагинов