Чистильщик CSS кода.

Удаляет из CSS файлов лишнии стили. Инструмент сохраняет стили для динамически сгенерированных элементов.

Список страниц для сканирования:

Нужно указать полный путь с префиксом http:// или https://.

Вопросы и ответы

Зачем нужно чистить CSS файлы?

Сайты постоянно обновляются, добавляются новые функции, а старые удаляются. Часто в CSS файлах остаётся код уже удалённых элементов. Это засоряет их. Чем крупнее ваши CSS файлы и чем больше в них лишнего кода, тем сложнее программистам читать и модифицировать их.

Почистив CSS файлы, вы ускоряете работу программиста так, как большую часть времени он занимается чтением кода. Чистый код проще понять. Вероятность ошибки снижается.

Некоторые элементы генерируются динамически. Как инструмент понимает, что стили для них актуальны и их надо оставить?

Мы открываем страницу в реальном браузере. Таким образом, JavaScript код полностью исполняется и динамические элементы создаются. Мы анализируем HTML, сгенерирован браузером после окончательной загрузки страницы. Также наш инструмент работает с сайтами, и использующими такие JavaScript фреймворки как AngularJS, React, Vue.js и т. д.

Как правильно работать с инструментом и не удалить ничего лишнего?

Некоторые актуальные стили могут быть удалены в 2 случаях: - Элементы, использующие эти стили, находятся на страницах, которые не участвуют в сканировании. - Элементы, которые генерируются или подгружаются в ответ на действия пользователя. Например, клик на кнопке, отправка формы или прокрутка страницы.

Если инструмент отчищает 30% CSS файла или более, то правильным решением будет заменить текущие файлы на отчищенные. Затем протестировать весь сайт и вернуть несколько десятков строк актуального кода.

Если инструмент удаляет несколько десятков строк кода, тогда лучше почистить ваши CSS файлы вручную. Кликнув на иконку , вы увидите удалённый код.

Как ещё можно использовать инструмент?

Выделение сквозных стилей

Сквозные стили предназначены для часто используемых элементов, таких как: шапка, меню, подвал, элементы форм, h1-h6 заголовки и т. д. Рекомендуется выделить их в отдельный файл использовать на каждой странице. Благодаря кешированию, они загрузятся только один раз и будут использоваться на всём сайте. Это ускорит сайт. Также это упорядочивает кода, что упрощает его поддержку.

Чтобы выделить сквозные стили, надо: - Создать отдельную страницу со всеми сквозными элементами. - Использовать чистильщик CSS кода. - Скопировать весь полученный код в один файл. Обычно он называется common.css. - Готово. Файл common.css содержит все сквозные стили.

У меня есть вопрос, предложение или замечание.

Мы рады любой обратной связи от наших пользователей. Задавайте свои вопросы в нашем телеграмм чате поддержки. Мы постоянно улучшаем наши инструменты и рады получить любые ваши предложения.