Подробности про UnCSS

Вёрстка CSS  /  Tools

Ранее я уже немного упоминал UnCSS, а сегодня расскажу о нем подробнее. Напомню, он, с помощью PhantomJS, рендерит страницы и выполняет JavaScript, ищет используемые классы и удаляет остальные.

Лично мне удобнее всего использовать его вместе с PostCSS. При желании, можно подключить его к Grunt, Broccoli или Gulp. Также можно использовать его API из Node.js или вызывать из командной строки. Подробности есть на странице проекта.

Важные замечания

Что нужно иметь в виду, при использовании UnCSS.

Во-первых — некоторые “динамические” стили могут быть незаслуженно выпилены. После того, как вы это обнаружите, решить проблему можно с помощью опции ignore или простым комментарием перед селектором:

/* uncss:ignore */ .js .input-file { ...

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

Опыт использования

Пока могу сказать, что опыт использования небольшой, но положительный. Поскольку я использую его вместе с PostCSS, всё просто. Сначала ставится плагин postcss-uncss:

npm install postcss-uncss uncss

Затем в набор плагинов для PostCSS прописывается этот (указан один файл для примера, в принципе можно задавать несколько файлов, маски файлов тоже допустимы):

require('postcss-uncss')({ html: [ 'index.html' ] }

Если требуется, задаются исключения (в строчке выше или комментариями, как в предыдущем разделе. Вот, собственно, и всё. В результате, CSS избавляется от неиспользуемых стилей, а пользователи наслаждаются чуть более быстрой загрузкой страниц :)

Вёрстка CSS  /  Tools