- PVSM.RU - https://www.pvsm.ru -
Аудит (здесь и далее слово «аудит» употребляется в значении «оценка качества») CSS не относится к повседневным задачам при разработке веб-приложений, но иногда приходится этим заниматься. Это может быть частью процесса определения критического CSS, удаления неиспользуемых селекторов, улучшения доступности, когда все цвета в кодовой базе оцениваются на предмет контрастности, и т.д.
Существуют некоторые инструменты, облегчающие выполнение указанных задач. Но давайте начнем с того, что понимается под «аудитом» CSS.
Как правило, оценка качества кода включает в себя его анализ в поиске багов и других проблем, например, проблем с производительностью. Для большинства языков программирования концепция аудита кода проста: она работает или не работает. Но CSS — это особенный язык, большая часть ошибок которого игнорируется браузером. Один и тот же стиль можно применять совершенно по-разному. Это обуславливает сложность аудита CSS. И «сложность» — это еще мягко сказано.
Для обнаружения проблем с CSS мы можем использовать расширения в нашем любимом редакторе кода или какой-нибудь линтер. Однако, подчас этого бывает недостаточно. Мы по-прежнему будем иметь возможность использовать слишком большое количество цветов, определений шрифтов или z-index
, что сделает CSS плохо поддерживаемым и нестабильным.
Для настоящего аудита CSS нам необходимо погрузиться гораздо глубже с целью обнаружения блоков кода, которые считаются плохой практикой. Для обнаружения таких мест мы можем использовать следующие инструменты.
Давайте взглянем на инструменты разработчика для аудита CSS, предоставляемые барузером Google Chrome
.
Для ручной проверки CSS существует инструмент Inspect
(стрелка в квадрате в верхнем левом углу). С его помощью мы можем увидеть CSS, примененный к определенному элементу. А с помощью стрелки можно получить детальную информацию о цветах, шрифтах, размере и доступности.
Интерфейс DevTools
предоставляет много интересных возможностей, но моей любимой является инспектор Grid и Flex. Для того, чтобы его включить, необходимо перейти в настройки (шестеренка в верхнем правом углу), выбрать «Experiments» и «Enable new CSS Flexbox debugging features».
Данный инструмент можно использовать как для отладки проблем с макетом, так и просто для определения того, используется ли CSS Grid или Flexbox на странице.
Инспектирование CSS позволяет получить базовую информацию об используемом на странице CSS. Рассмотрим более продвинутые инструменты разработчика.
Одним из таких инструментов является «CSS Overview». Для его включения необходимо перейти в настройки, выбрать «Experiments» и «CSS Overview». Для открытия панели CSS Overview можно нажать Ctrl/Cmd+Shift+P
, ввести «css overview», выбрать «Show CSS Overview» и нажать «Capture overview». Данный инструмент суммирует CSS-свойства, такие как цвета, шрифты, проблемы с контрастностью, неиспользуемые объявления и медиа-запросы. Я, обычно, использую этот инструмент для получения общего представления о качестве CSS. Например, если на странице используется «50 оттенков серого» или слишком много определений шрифтов, это может свидетельствовать об отсутствии какого бы то ни было руководства по стилю.
Инструмент «Coverage» (покрытие) показывает общее количество и процент кода, используемого на странице. Для его запуска следует нажать Ctrl/Cmd+Shift+P
, ввести «coverage», выбрать «Show Coverage» и нажать на иконку обновления.
Для фильтрации CSS-файлов нужно ввести ".css" в «URL filter input». Обычно, я использую этот инструмент для понимания техники CSS, используемой на сайте. Например, если я вижу высокую степень покрытия, я могу предположить, что CSS-файл генерируется для каждой страницы в отдельности. Иногда это также помогает определить применяемую на сайте стратегию кэширования.
Панель «Rendering» (рендеринг) — другой полезный инструмент. Для его использования снова нажимаем Ctrl/Cmd+Shift+P
, вводим «rendering», выбираем «Show Rendering». У этого инструмента много настроек, но моими любимыми являются следующие:
Я не слишком часто использую рассматриваемый инструмент, но он иногда может быть полезен для выявления проблем с производительностью и связанного с этим расхода заряда батареи устройства пользователя.
Другие настройки, такие как эмуляция и отключение определенных возможностей, включение prefers-color-scheme
или медиа-типа для печати или отключение локальных шрифтов, на мой взгляд, являются менее полезными.
Инструменты разработчика помогают понять, какие возможности CSS используются на странице, насколько эффективно они используются и каково их влияние на производительность. Разумеется, ими аудит CSS далеко не исчерпывается.
Specificity Visualizer [1] показывает специфичность CSS-селекторов. Для его использования достаточно зайти на сайт, вставить CSS и нажать «Visualize it!».
Основной график показывает специфичность в зависимости от нахождения таблицы со стилями. Два других графика показывают правильное использование специфичности. Я часто использую этот инструмент для обнаружения «плохих» селекторов. Например, если я вижу много красных точек, значит, мой код не так хорош, как я думал. Проанализируем основной файл со стилями Хабра:
CSS Specificity Graph Generator [2] — это похожий инструмент для визуализации специфичности. Он показывает немного другой график, позволяющий определить, как наши селекторы организованы с точки зрения специфичности. Общее правило гласит, что селекторы с большей специфичностью в таблице стилей должны указываться позже, чем селекторы с меньшей специфичностью.
CSS Stats [3] — еще один инструмент для анализа и визуализации таблиц стилей.
Все, что нужно сделать, это ввести адрес сайта и нажать Enter
. Информация разделяется на логические секции, такие как количество цветов, шрифты, z-index
, специфичность и т.д. Можно сделать скриншот для последующего сравнения.
Одной из главных особенностей Project Wallace является то, что данный инструмент позволяет сравнивать и визуализировать изменения на основе импортов. Это означает, что мы можем видеть разницу между предыдущим и текущим состояниями нашего CSS. Это может быть очень полезным для демонстрации улучшения кодовой базы.
Одним из моих любимых инструментов (интерфейсов) командной строки является Wallace [4]. После установки, введите wallace
и название сайта. В терминал будет выведено все необходимое, что нужно знать о CSS, используемом на указанном сайте. Например, можно посмотреть, сколько раз используется !important
или сколько id
встречается в коде. «Плохой» код отмечается красным цветом.
Что мне нравится в этом инструменты, так это то, что он извлекает весь CSS, используемый на сайте, т.е. не только из внешних файлов, но также встроенный. Вот почему отчеты CSS Stats и Wallace не совпадают. Для работы Wallace требуется Python.
CLI csscss [5] показывает, какие правила являются распределенными (совместно используемыми). Это может быть полезным для определения дублирующегося кода, что позволяет избавиться от такого кода, уменьшив общий размер кодовой базы. Для сайтов, использующих правильные механизмы кэширования, данная проблема не слишком актуальна. Для работы csscss требуется Ruby.
Ни один веб-проект не обходится без CSS. Поэтому его качеству следует уделять самое пристальное внимание. Не столь важно, что другие люди думают о вашем CSS, сколько то, что вы сами о нем думаете. Если ваш CSS хорошо написан и правильно организован, вы будете тратить меньше времени на его отладку и больше на разработку новых «фич».
Я понимаю, что аудит CSS может быть очень скучным и утомительным занятием. Однако, если вы попробуете хотя один инструмент из указанных в данной статье, и этот инструмент поможет сделать ваш CSS лучше, значит, мои усилия были не напрасны.
А какие инструменты для аудита CSS вы используете в своей работе? Дайте знать в комментариях.
Зарегистрируйтесь по ссылке выше или кликнув на баннер и получите 10% скидку на первый месяц аренды сервера любой конфигурации!
Автор: owlofmacloud
Источник [14]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/programmirovanie/364285
Ссылки в тексте:
[1] Specificity Visualizer: https://isellsoap.github.io/specificity-visualizer/
[2] CSS Specificity Graph Generator: https://jonassebastianohlsson.com/specificity-graph/
[3] CSS Stats: https://cssstats.com/stats
[4] Wallace: https://github.com/projectwallace/wallace-cli
[5] csscss: https://github.com/zmoazeni/csscss
[6] Color Sorter: https://github.com/projectwallace/color-sorter
[7] CSS Analyzer: https://github.com/projectwallace/css-analyzer
[8] constyble: https://github.com/projectwallace/constyble
[9] Extract CSS: https://extract-css.vercel.app/
[10] Get CSS: https://content-project-wallace.vercel.app/get-css
[11] uCSS: https://github.com/oyvindeh/ucss
[12] Маклауд: https://macloud.ru/?partner=4189mjxpzx
[13] хостинга: https://www.reg.ru/?rlink=reflink-717
[14] Источник: https://habr.com/ru/post/557580/?utm_source=habrahabr&utm_medium=rss&utm_campaign=557580
Нажмите здесь для печати.