German
12 Августа 2021
Что такое чистый код для CSS?
В CSS, сокращение от Cascading Style Sheets, это способ применения значений свойств к содержимому в виде иерархии. Дочерние элементы могут наследовать или переопределять значения свойств родительских элементов.
Если эта иерархия не соблюдается должным образом или команда использует неправильные методы, это может серьезно повлиять на производительность веб-сайта. Вот почему так важно оптимизировать и стараться поддерживать чистоту CSS.
Со временем, пока мы добавляем больше функций или просто вносим небольшие изменения в элементы HTML, CSS может быстро расти, и его становится сложно поддерживать, особенно если вы не придерживаетесь принципа YAGNI («Он вам не понадобится», используйте только те функции, которые необходимы) в виду.
В конце концов, вам нужно удалить неиспользуемый CSS или оптимизировать его.
CSS-фреймворки могут загружать проект до 140 КБ CSS или более, что очень много и может занять много времени для рендеринга. Этот размер также возможен, когда у вас много шаблонов и страниц, и если вы не используете их все, наличие инструментов для уменьшения размера и удаления мертвого кода того стоит.
Почему хорошо удалять мертвый код?
Мертвый CSS повлияет на время рендеринга вашего сайта. Использование Lighthouse дает хороший обзор потенциальной экономии, которую вы могли бы получить во время загрузки, удалив мертвый CSS, а также оценив свой сайт по другим категориям, таким как SEO, производительность, доступность и лучшие практики.
Как можно обнаружить мертвый css код?
Один из инструментов, который мне нравится использовать, — это Coverage (покрытие) из Google Chrome.
См. Find Unused JavaScript And CSS With The Coverage Tab
Другие способы обнаружения мертвого CSS
Чтобы проанализировать ваш код и найти неиспользуемый CSS, вы можете использовать несколько автоматизированных инструментов;
PurifyCSS и PurgeCSS являются наиболее часто используемыми, и их можно интегрировать в процесс сборки, в то время как UnusedCSS — это веб-сайт, который проверяет и предоставляет вам отчет об использовании вашего CSS.
Чтобы избежать неиспользуемого CSS, убедитесь, что вы ограничиваете свои компоненты и поддерживаете хорошую структуру.
Слегка дополню. Надо только очень аккуратно пользоваться этими инструментами, т.к. некоторые проводят анализ непосредственно одной страницы и видимой области. Например. код используемый после авторизации может быть им недоступен.
Были случаи, когда чистили в восторге (от размера), а далее что-то не особо работает. Ну тут одно спасает, обычно испортить css — не смертельно. :)
P.S. на сайте подправил некоторые ошибки, например, иконки оповещения не было. И центрирование отдельных элементов.