Чистильщик CSS кода.
Оставляет в CSS файлах только используемые на страницах стили.
Вопросы и ответы
Сайты постоянно обновляются, добавляются новые функции, а старые удаляются. Часто в CSS файлах остаётся код уже удалённых элементов. Это засоряет их. Чем крупнее ваши CSS файлы и чем больше в них лишнего кода, тем сложнее программистам читать и модифицировать их. Это сказывается на скорости работы.
Также лишние стили замедляют работу браузера. Это особенно актуально для пользователей мобильных устройств.
Почистив CSS файлы, вы ускоряете работу программиста так, как большую часть времени он занимается чтением кода. Чистый код проще понять. Вероятность ошибки снижается.
| Пример | CSS | |||
|---|---|---|---|---|
| Файл | Было | Стало | Итог | |
Мы открываем страницу в реальном браузере. Таким образом, JavaScript код полностью исполняется и динамические элементы создаются. Мы анализируем HTML, сгенерирован браузером после окончательной загрузки страницы. Также наш инструмент работает с сайтами, и использующими такие JavaScript фреймворки как AngularJS, React, Vue.js и т. д.
Некоторые актуальные стили могут быть удалены в 2 случаях:
- Элементы, использующие эти стили, находятся на страницах, которые не участвуют в сканировании.
- Элементы, которые генерируются или подгружаются в ответ на действия пользователя. Например, клик на кнопке, отправка формы или прокрутка страницы.
После сканирования замените ваши оригинальные файлы на те, где лишний код закомментирован. Затем, во время тестирования просто раскоментируйте куски кода, если они оказались актуалеными.
По окончанию тестирования просто удалите оставшиеся закомментированные участки. Вуаля! Ваш CSS код чист!
Выделение сквозных стилей
Сквозные стили предназначены для часто используемых элементов, таких как: шапка, меню, подвал, элементы форм, h1-h6 заголовки и т. д. Рекомендуется выделить их в отдельный файл и использовать на каждой странице. Благодаря кешированию, они загрузятся только один раз и будут использоваться на всём сайте. Это ускорит загрузку страниц. Также это упорядочивает код, что упрощает его поддержку.
Чтобы выделить сквозные стили, надо:
- Создать отдельную страницу со всеми сквозными элементами.
- Использовать чистильщик CSS кода.
- Скопировать весь полученный код в один файл. Обычно он называется common.css.
- Готово. Файл common.css содержит все сквозные стили.
Мы рады любой обратной связи от наших пользователей. Задавайте свои вопросы в нашем телеграмм чате поддержки. Мы постоянно улучшаем наши инструменты и рады получить любые ваши предложения.