4 инструмента для аудита и оптимизации CSS

Как только ваш сайт начнет расти, ваш код тоже. Когда ваш код расширяется, CSS может внезапно стать трудным в обслуживании, и вы можете переписать одно правило CSS другим. Это усложняет ситуацию, и вы, вероятно, получите множество ошибок.

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

Вот 5 хороших инструментов, которые помогут вам проверить и оптимизировать CSS.

Type-O-Matic

Type-O-Matic это плагин Firebug для анализа шрифтов, которые используются на веб-сайте. Этот плагин предоставляет визуальный отчет в таблице, содержащий свойства шрифта, такие как семейство шрифтов, размер, вес, цвет, а также количество раз, которое шрифт используется на веб-странице. Посредством таблицы отчетов вы можете легко оптимизировать использование шрифта, удалить ненужное или комбинировать слишком похожие стили.

CSS Lint

CSS Lint это пыление инструмент, который анализирует синтаксис CSS на основе конкретных параметров, которые влияют на производительность, доступность и совместимость вашего CSS. Вы будете удивлены результатами, ожидайте много предупреждений в вашем CSS. Однако эти ошибки в конечном итоге помогут вам исправить синтаксис CSS и сделать его более эффективным. Кроме того, вы также будете лучшим писателем CSS.

CSS ColorGuard

CSS ColorGuard это относительно новый инструмент. Он построен как модуль Node и работает на всех платформах: Windows, OS X и Linux. CSS ColorGuard - это инструмент командной строки, который уведомит вас, если вы используете похожие цвета в своей таблице стилей; например. # f3f3f3 довольно близко к # f4f4f4, так что вы можете рассмотреть возможность объединения двух. CSS ColorGuard настраивается, вы можете установить порог сходства, а также установить цвета, которые вы хотите, чтобы инструмент игнорировал.

CSS Dig

CSS Dig является скриптом Python и работает локально на вашем компьютере. CSS Dig проведет тщательную проверку вашего CSS. Он будет читать и объединять свойства, например все объявления цвета фона будут находиться под разделом фона. Таким образом, вы можете легко принимать решения на основе отчета при попытке стандартизировать ваш синтаксис CSS, например, Вы можете найти цвет в разных стилях с помощью следующей декларации цвета.

 цвет: #ccc; цвет: #cccccc; цвет: #CCC; цвет: #CCCCCC; 

Эти цветовые декларации делают то же самое. Вы могли бы также пойти с #ccc или со столицей #ccc как стандарт. CSS Dig может раскрыть эту избыточность и для других свойств CSS, и вы сможете сделать свой код более согласованным.