Ранее я уже немного упоминал UnCSS, а сегодня расскажу о нем подробнее. Напомню, он, с помощью PhantomJS, рендерит страницы и выполняет JavaScript, ищет используемые классы и удаляет остальные.
Лично мне удобнее всего использовать его вместе с PostCSS. При желании, можно подключить его к Grunt, Broccoli или Gulp. Также можно использовать его API из Node.js или вызывать из командной строки. Подробности есть на странице проекта.
Что нужно иметь в виду, при использовании UnCSS.
Во-первых — некоторые “динамические” стили могут быть незаслуженно выпилены. После того, как вы это обнаружите, решить проблему можно с помощью опции ignore или простым комментарием перед селектором:
Во-вторых, что следует из первого пункта — доверяйте, но проверяйте — стоит периодически проверять что необходимые стили на месте. В зависимости от масштаба проекта это можно делать либо визуально, либо с помощью автоматических тестов.
Пока могу сказать, что опыт использования небольшой, но положительный. Поскольку я использую его вместе с PostCSS, всё просто. Сначала ставится плагин postcss-uncss:
Затем в набор плагинов для PostCSS прописывается этот (указан один файл для примера, в принципе можно задавать несколько файлов, маски файлов тоже допустимы):
Если требуется, задаются исключения (в строчке выше или комментариями, как в предыдущем разделе. Вот, собственно, и всё. В результате, CSS избавляется от неиспользуемых стилей, а пользователи наслаждаются чуть более быстрой загрузкой страниц :)