Как найти неиспользуемые классы в HTML

Проблема наличия неиспользуемых классов в HTML коде становится все более актуальной с ростом сложности веб-сайтов. С течением времени проект может обрасти множеством ненужных стилей, которые не используются. Это не только создает визуальный беспорядок, но и усложняет процесс работы с проектом.

Зачем искать и удалять неиспользуемые классы?

1. Оптимизация кода: удаление ненужных классов упрощает код, делая его более читабельным и легким для понимания.
2. Увеличение скорости загрузки страницы: меньше кода — меньше времени на его загрузку и обработку.
3. Упрощение обслуживания: меньше классов — легче вносить изменения и искать ошибки.

ОНЛАЙН-ПРАКТИКУМ

КАК «ХАКНУТЬ» PYTHON С ПОМОЩЬЮ CHATGPT

ЧТО БУДЕТ НА ОБУЧЕНИИ?

• Прямо в эфире решим типичные задачи программиста только с помощью ChatGPT
• Возможности Python — расскажем что можно делать и сколько на этом зарабатывать?
• Что ждет рынок программирования и почему мы решили сюда пойти

Участвовать бесплатно

Основные методы поиска неиспользуемых классов

• Ручной поиск

Самый простой, но трудоемкий метод. Откройте HTML-файл и сравните все классы с теми, что используются в CSS-файлах. Этот метод подходит для небольших проектов.

• Использование инструментов

Инструменты для статического анализа

1. PurifyCSS: анализирует ваш HTML и CSS и удаляет неиспользуемые стили. Он поддерживает множество фреймворков и библиотек.
2. UnCSS: работает схожим образом, но более гибок в настройке. Он сканирует HTML и CSS файлы, находя и удаляя неиспользуемые стили.
3. PurgeCSS: интегрируется с современными сборщиками модулей (Webpack, Gulp и др.), анализируя содержимое ваших файлов и удаляя неиспользуемые классы.

Инструменты для динамического анализа

1. UnusedCSS: анализирует ваш сайт в реальном времени, выявляя неиспользуемые стили.
2. Coverage в Chrome DevTools: позволяет увидеть покрытие CSS и JS, указывая на неиспользуемые стили и скрипты.

Пошаговые инструкции

Пример с использованием PurifyCSS

• Установите PurifyCSS:

npm install purify-css

• Используйте его в проекте:

purifycss src/*.html src/*.css --min --info --output purify.css

• Этот скрипт просканирует все HTML и CSS файлы в папке src и создаст минимизированный CSS файл purify.css, содержащий только используемые стили.

Пример с использованием Coverage в Chrome DevTools

1. Откройте вашу веб-страницу в Google Chrome.
2. Откройте DevTools (F12 или Ctrl+Shift+I).
3. Перейдите на вкладку «Coverage».
4. Нажмите кнопку записи и обновите страницу.
5. После загрузки страницы DevTools покажет, какие CSS и JS файлы не используются.
6. Проанализируйте результаты и удалите неиспользуемые стили из вашего CSS файла.

Пример с использованием UnCSS

• Установите UnCSS:

npm install uncss

• Создайте скрипт для UnCSS в вашем проекте:

const uncss = require('uncss');

const files = ['src/index.html'];

const options = {};

uncss(files, options, (error, output) => {

console.log(output);

});

• Этот скрипт просканирует файл index.html и выведет результат, содержащий только используемые стили.

Распространенные ошибки и как их избегать

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

Заключение

Поиск и удаление неиспользуемых классов в HTML — важный процесс для поддержания чистоты и эффективности кода. Существует множество инструментов и методов, которые могут помочь в этом, начиная от ручного поиска и заканчивая автоматизированными инструментами для статического и динамического анализа. Регулярное использование этих методов поможет поддерживать ваш проект в хорошем состоянии.