От автора: существует множество инструментов, которые помогут вам удалить из проекта «неиспользуемые CSS». Не проходит и недели, чтобы я не сталкивался с тем, что кто-то делится или продвигает подобный инструмент. На некоторых разработчиков это действует. Я забочусь о производительности, и я знаю, что уменьшение размеров файлов — это хорошо для производительности. В самом деле. Уверен, у нас есть CSS, который не используется в наших таблицах стилей. Если мы удалим его, это победа в производительности. Да, это было бы здорово. Нам стоит автоматизировать этот процесс. Нууууу, не уверен.
Существуют основные игроки в нише инструментов для оптимизации производительности, которые продвигают эту идею, например Lighthouse с их «Охватом» CSS и JS, который, несомненно, скажет вам, что вы доставляете код, который вам не нужен.
Инструменты, которые утверждают, что помогут вам с неиспользуемым CSS, должны выполнить анализ, чтобы иметь возможность определить, что используется, а что нет.
Вот один из способов сделать этот анализ. Отобразите страницу своего сайта и получите полный DOM. Затем также получите полный CSSOM, который может дать вам массив всех селекторов в CSS. Переберите эти селекторы и выполните querySelector в DOM и посмотрите, соответствуют ли они. Если это не так, этот селектор CSS не используется.
Умно, не так ли?! Я думаю, да. Но этот анализ дает довольно ограниченную картину.
Скажем, что анализ выполняется через две секунды после завершения загрузки страницы, но существует определенный JavaScript, который запускается и выводит модальное окно через пять секунд (бррррр, я знаю, сам не люблю этого). Анализ пропустил бы HTML этого модала, который, вероятно, имеет стили, и, таким образом, неверно сообщил бы о том, что эти данные стили не используются.
Таким образом, выбор времени является одним из факторов. Надеюсь, что этот инструмент анализа имеет некоторый способ настройки нескольких таймингов.
Пока мы просматриваем только одну страницу. Конечно, сайт может иметь десятки, сотни или тысячи страниц. Чтобы быть абсолютно уверенным в том, что стиль не используется, нужно просмотреть их все. Тогда это более полная уверенность.
Еще один фактор — количество страниц. Надеемся, что инструмент анализа имеет возможность просмотреть столько страниц, сколько вы укажете. Возможно, он может использовать карту сайта?
Помните о тайминге? Мы могли бы представить время, как одну общую форму состояния. Существует множество других вещей, которые могут быть связаны с состоянием. Входит ли пользователь в систему или нет? Какой у него план? Просрочена ли его кредитная карта? В этом случае выводится какое-то особое сообщение? Имеются ли определенные условные вещи, такие как изменение времени / даты / геолокации? Как насчет данных в реальном времени? Элементы из API?
Состояние на уровне приложений явно является важным фактором. Надеемся, что этот инструмент анализа может запускать / устанавливать все возможные комбинации состояний.
Также есть интерактивное состояние. Как насчет модалов, которые выводятся, когда что-то было нажато? Какая в данный момент активна вкладка? Открыто или закрыто это меню? В какой позиции прокрутки они находятся? Это бесконечные возможные варианты. Представьте себе панель предупреждения, которая появляется через семь секунд после входа пользователя в систему, чтобы предупредить его о том, что его кредитная карта просрочена, которая содержит пользовательское меню выбора, оно в свою очередь может находиться в открытом или закрытом состоянии, но только на странице настроек пользователя.
Кажется маловероятным, что этот инструмент анализа может справиться со всеми этими вариантами. Даже при условии загрузки конфигурации, имитации состояний и интеграции тестирования, он не сможет охватить почти бесконечное количество возможных комбинаций всего этого.
И все же, я не думаю, что эти инструменты бесполезны — это просто … инструменты. Их использование действительно может быть верным шагом на пути к лучшему коду. Их использование говорит: ОК, я признаю это, я немного боюсь за наш CSS. Вы можете использовать этот инструмент, чтобы получить общее представление о том, каким может быть ваш неиспользуемый CSS, а затем объединить это с собственным знанием своей базы кода CSS, чтобы принять более обоснованные решения. Или сделайте еще один технологический шаг вперед и задайте что-то вроде добавления фонового изображения к этим неиспользуемым селекторам и проверьте журналы сервера, чтобы узнать, действительно ли они не используются.
Следует отметить, что вся эта идея неиспользуемого CSS является частью саги CSS-in-JS, которую переживает наша отрасль. Если все ваши стили написаны как часть компонентов, то неиспользуемого CSS не может быть. Либо компонент используется, и стили сопровождают его, либо нет. Если вы особенно обеспокоены проблемой неиспользуемого CSS, это может подтолкнуть к тому, чтобы взять на вооружение инструмент CSS-in-JS.
Также следует сказать, что этот метод анализа DOM и CSSOM является лишь одним из возможных способов проверки неиспользуемых стилей. Если бы у вас был какой-то хитрый инструмент, который мог бы анализировать все шаблоны, стили и скрипты, возможно, это можно было также применять для определения неиспользуемых стилей. Мы обсуждали это в недавнем эпизоде ShopTalk Show с Крисом Эпштейном.
Автор: Chris Coyier
Источник: https://css-tricks.com/
Редакция: Команда webformyself.
