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

Созданный сайт будет постоянно расширяться, и однажды вы осознаете, насколько трудно разобраться в его CSS.

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

1. Type-o-Matic

Type-o-Matic

Type-o-matic представляет собой Firebug-плагин, который умеет анализировать шрифты, использованные на страницах сайта. Этот плагин выводит отчет в виде таблицы с информацией о свойствах используемых шрифтов (семейство, размер, цвет и другое).

Несмотря на то, что отчет представлен в табличном виде, вы сможете без труда редактировать этот список, скомбинировав или удалив похожие по стилю шрифты.

2. CSSCSS

CSSCSS

Инструмент анализирует ваши CSS-файлы на наличие дублей. Это позволит уменьшить размер CSS и гораздо удобнее работать с ними в дальнейшем. Инструмент очень прост в установке – он реализован в виде пакета расширения для Ruby, и запускается из командной строки.

3. CSS Lint

CSS Lint

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

4. CSS Colorguard

CSS Colorguard

Зачастую попадаются клиенты, желающие использовать такие цвета, о существовании которых вы даже не подозревали. CSS Colorguard поможет составить необходимые цветовые схемы, и предупредит в том случае, если вы используете два одинаковых цвета.

5. CSS Dig

CSS Dig

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

6. Dust Me

Dust Me

Dust-Me – плагин для Firefox и Opera, который выводит неиспользуемые селекторы из таблицы стилей. Инструмент берет весь CSS вашего сайта, и показывает, какие именно селекторы используются, а какие лишние.

7. Devilo.us

Devilo.us

Devilo.us – продвинутый движок для сжатия и оптимизации CSS-кода, который теперь поддерживает CSS3.

8. PurifyCSS

PurifyCSS

Инструмент помогает избавиться от неиспользуемых CSS-стилей на страницах сайта или в веб-приложениях. Способен определять даже динамически загружаемые CSS-селекторы в javascript-коде, и существенно сжимать размер файлов стилей.

9. Atomic CSS

Atomic CSS

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

10. Clean CSS

Clean CSS

CleanCSS представляет собой многофункциональный CSS-оптимизатор. Инструмент берет ваш CSS-код и делает его чище и меньше в объеме. Вы можете оптимизировать код, написанный на разных языках: javascript, json, python, html и т. д.

11. PubCSS

PubCSS

Инструмент облегчает форматирование CSS-кода страниц академических изданий. Это библиотека CSS-стилей для форматирования документов под печать и публикацию в интернете.

12. CSSO

CSSO

CSSO (CSS Optimizer) ¬– это инструмент, который производит структурную оптимизацию ваших CSS-файлов.

13. Helium

Helium

Helium – это инструмент для выявления неиспользуемых CSS-свойств на всех страницах сайта. Он основан на javascript и работает прямо в браузере. Helium принимает список URL-адресов разделов сайта, а затем анализирует каждую страницу для последующего составления списка всех стилей. После чего выявляет не использующиеся свойства CSS.

14. Strip Comments

Strip Comments

Strip CSS Comments значительно облегчает следующие задачи: удаление комментариев из CSS-файлов, уменьшение размеров файлов. Он также доступен в виде плагина для gulp/grunt/broccoli.

15. CSS Shrinks

CSS Shrinks

Инструмент позволяет без труда оптимизировать CSS-файлы, сохраняя последовательность и формат разметки. В нем есть несколько средств, которые позволяют удалять в документе пробелы и комментарии.

Возможно, у вас на примете есть еще какие-нибудь полезные CSS-инструменты? Пожалуйста, поделитесь ими в комментариях!

РедакцияПеревод статьи «15 CSS Tools to Audit and Optimize Your CSS Code»