Как быстро удалить не используемые стили css?

Вопросы-ответы / 29 января 2017

Как вообще можно удалять не используемые стили с наборов фреймворков?

Например: в системе MaxSite CMS используется фреймворк UniCSS. После окончания правки шаблона под себя - как удалить не используемые стили css? ведь это существенно увеличит скорость загрузки стилей.

Дмитрий (lider30) 4 1399

Еще записи по теме

Комментариев: 4

Stahlwerk | 2017-01-31 в 03:14:49

система так построена, что в папке assets css есть несколько файлов стилей. Все, которые там находятся, грузятся автоматически. Если ты точно знаешь, что они не нужны, просто вытащи из папки или удали.

это существенно увеличит скорость загрузки стилей

Я тоже так думал, но оказалось, что современные системы настолько быстры и мощны, что об этом даже беспокоиться не стоит. Куда больше времени занимает загрузка одной картинки или скрипта.
Илья Земсков (эксперт по MaxSite CMS) | 2017-01-31 в 10:06:40

Дмитрий, когда-то давно использовал для этих целей специальные браузерные расширения. Попробуй поискать в категории для разработчиков. Они анализировали сайт и выдавали подсказку по неиспользуемым стилям.

Хотя сейчас я тоже не морочусь, тем более с стилями от фреймворков. Они на то и фреймворки, чтобы давать заготовки, которые можно использовать при необходимости. Если что-то не нравится или считаешь лишним в фреймоворке, то проще выпилить из исходного кода и перекомпилировать для себя. Такое с UniCSS я тоже делал по необходимости. Ничего сложного.
Дмитрий (lider30) | 2017-01-31 в 16:46:44

Есть решение для удаления не используемых css:

https://github.com/addyosmani/grunt-uncss

Кто сможет пояснить - как использовать этот инструмент?
Илья Земсков (эксперт по MaxSite CMS) | 2017-01-31 в 18:22:04

Кто сможет пояснить - как использовать этот инструмент?

Подозреваю, что на этом сайте вряд ли кто сможет дать подробную инструкцию... Поэтому, вас ожидает незабываемое самостоятельное погружение в технологии nodejs и grunt!

Если с ними разберётесь, то инструкция к grunt-uncss окажется исчерпывающей. Там даже анимация есть вполне подробная.