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

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

Якщо це відбувається з вами, то вам настав час перевірити CSS вашого сайту. Аудит вашого CSS дозволить вам ідентифікувати частини вашого CSS, які не оптимізовані. Також можна зменшити розмір файлів стилів, усунувши рядки коду, які уповільнюють продуктивність вашого сайту.

Ось 5 хороших інструментів, які допоможуть вам перевірити та оптимізувати CSS.

Тип-o-matic

Тип-o-matic це плагін Firebug для аналізу шрифтів, які використовуються на веб-сайті. Цей плагін дає візуальний звіт у таблиці, що містить властивості шрифту, такі як сімейство шрифтів, розмір, вага, колір, а також кількість разів використання шрифту на веб-сторінці. За допомогою таблиці звітів ви можете легко оптимізувати використання шрифту, видалити непотрібне або поєднати стилі, які дуже схожі.

CSS Lint

CSS Lint є linting Інструмент, який аналізує синтаксис 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, і ви зможете зробити свій код більш послідовним.