Самый первый отчет CSS о размерах и количестве файлов CSS

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

О CSS аудите

Аудит CSS — не очень популярная тема, но мы считаем ее очень важной. Хотя есть несколько отличных инструментов и ресурсов, мы не думаем, что они достаточно широко распространены. Одна из целей аудиторов CSS — попытаться изменить это. Мы хотим привлечь внимание к CSS и всем аспектам написания качественного кода CSS. В конце концов, каждый сайт на земле использует CSS, за очень немногими исключениями. как этот.

Википедия имеет это определение для аудита кода:

Аудит кода программного обеспечения — это всесторонний анализ исходного кода в проекте программирования с целью обнаружения ошибок, нарушений безопасности или нарушений правил программирования.

CSS — очень щадящий язык с точки зрения ошибок. Причина в том, что браузеры обычно пропускают строку, вызвавшую ошибку, в то время как остальная часть кода остается в силе. Существуют линтеры и другие инструменты, которые могут предотвратить эти проблемы. Тем не менее, они не могут помешать разработчикам писать неправильный CSS. Именно поэтому мы хотели бы добавить Качество CSS-кода к этому определению.

О качестве CSS

С абстрактными терминами, такими как качество, почти невозможно определить формулу или расчет. Как бы вы определили качество кода, в частности, качество кода CSS? Мы задавали этот вопрос в нескольких местах, в том числе dev.to и некоторые сообщества Slack. Вот некоторые из ответов:

Как упоминается в некоторых из предыдущих ответов:
Селекторы с низкой специфичностью
Стили на основе компонентов
— Спирос

Если CSS является модульным, многоразовым и масштабируемым.
Насколько велика пользовательская таблица стилей с точки зрения размера файла.
Использование внешних CSS-фреймворков, таких как Bootstrap или Foundation.
Для больших проектов, если реализуется препроцессор, такой как Sass или Less, с правильно организованными функциями, миксинами, переменными и т. д.
— Мэтт

Использование селекторов низкой/высокой специфичности.
Стили с меньшим уровнем шума
Читаемые стили (читаемы сверху вниз)
Забыли, что !important все еще существует.
— Джошуа

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

Нет начальной загрузки
В основном максимум 3 селектора (в случае sass 3 уровня вложенности)
Сухой
Упорядоченные объявления
Использование не, >, +, ~
Комментарии
Именование классов (понятное)
Уменьшение движения, контур не 0 и т. д. (Специальные возможности)
Анимация
Трансформировать
Нет кода бэкэнд-разработчика
— Крис

Соображения производительности. например, используя свойство will-change при анимации.
Рассмотрено использование анимации с помощью CSS и JS.
Последовательные шаблоны кодирования, например, всегда используйте сокращения, где это уместно.
Другие вещи, на которые я бы посмотрел, уже упоминались.
— Азлан

Кажется, нет ответа на вопрос, что подразумевает качество кода CSS. Ответ у всех разный и зависит от разных аспектов.

Самый первый аудиторский отчет

Первое, что приходит на ум, когда думаешь о качестве кода, — это размер файла. Именно это мы и сделали в нашем первом отчете — мы проверили код CSS всех сайтов Премьер-лиги. Это та часть, где мне удалось включить в проект мою страсть, спорт.

Полный отчет доступен здесь. Я не хочу писать спойлеры, так что я оставлю вас, чтобы прочитать это полностью.

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