15 инструментов для аудита и оптимизации кода CSS
Созданный сайт будет постоянно расширяться, и однажды вы осознаете, насколько трудно разобраться в его CSS.
Если вы уже столкнулись с подобной проблемой, то пришло время провести аудит вашего CSS-кода и оптимизировать его. Мы отобрали 15 инструментов, которые помогут вам сделать это. Некоторые из них помогут уменьшить размер файла с CSS, другие поспособствуют повышению производительности страниц.
1. Type-o-Matic
Type-o-matic представляет собой Firebug-плагин, который умеет анализировать шрифты, использованные на страницах сайта. Этот плагин выводит отчет в виде таблицы с информацией о свойствах используемых шрифтов (семейство, размер, цвет и другое).
Несмотря на то, что отчет представлен в табличном виде, вы сможете без труда редактировать этот список, скомбинировав или удалив похожие по стилю шрифты.
2. CSSCSS
Инструмент анализирует ваши CSS-файлы на наличие дублей. Это позволит уменьшить размер CSS и гораздо удобнее работать с ними в дальнейшем. Инструмент очень прост в установке – он реализован в виде пакета расширения для Ruby, и запускается из командной строки.
3. CSS Lint
Это средство поможет выявить проблемы в вашем CSS-коде. Инструмент проверяет основной синтаксис стилей, а также применяет набор правил к коду, который вызывает подозрения. Все правила подключаемые, поэтому вы сможете без труда их изменить.
4. CSS Colorguard
Зачастую попадаются клиенты, желающие использовать такие цвета, о существовании которых вы даже не подозревали. CSS Colorguard поможет составить необходимые цветовые схемы, и предупредит в том случае, если вы используете два одинаковых цвета.
5. CSS Dig
CSS Dig - это скрипт, написанный на Python, который запускается локально, и позволяет проанализировать свойства и значения CSS практически любого сайта, независимо от того, располагаются ли стили в отдельном файле или в коде страницы. Инструмент также помогает изменять, стандартизировать и оптимизировать CSS-код.
6. Dust Me
Dust-Me – плагин для Firefox и Opera, который выводит неиспользуемые селекторы из таблицы стилей. Инструмент берет весь CSS вашего сайта, и показывает, какие именно селекторы используются, а какие лишние.
7. Devilo.us
Devilo.us – продвинутый движок для сжатия и оптимизации CSS-кода, который теперь поддерживает CSS3.
8. PurifyCSS
Инструмент помогает избавиться от неиспользуемых CSS-стилей на страницах сайта или в веб-приложениях. Способен определять даже динамически загружаемые CSS-селекторы в javascript-коде, и существенно сжимать размер файлов стилей.
9. Atomic CSS
Atomic CSS поможет уменьшить CSS-файлы. Он позволяет оптимизировать скорость загрузки страниц, исключает зависимости, а также умеет многое другое.
10. Clean CSS
CleanCSS представляет собой многофункциональный CSS-оптимизатор. Инструмент берет ваш CSS-код и делает его чище и меньше в объеме. Вы можете оптимизировать код, написанный на разных языках: javascript, json, python, html и т. д.
11. PubCSS
Инструмент облегчает форматирование CSS-кода страниц академических изданий. Это библиотека CSS-стилей для форматирования документов под печать и публикацию в интернете.
12. CSSO
CSSO (CSS Optimizer) ¬– это инструмент, который производит структурную оптимизацию ваших CSS-файлов.
13. Helium
Helium – это инструмент для выявления неиспользуемых CSS-свойств на всех страницах сайта. Он основан на javascript и работает прямо в браузере. Helium принимает список URL-адресов разделов сайта, а затем анализирует каждую страницу для последующего составления списка всех стилей. После чего выявляет не использующиеся свойства CSS.
14. Strip Comments
Strip CSS Comments значительно облегчает следующие задачи: удаление комментариев из CSS-файлов, уменьшение размеров файлов. Он также доступен в виде плагина для gulp/grunt/broccoli.
15. CSS Shrinks
Инструмент позволяет без труда оптимизировать CSS-файлы, сохраняя последовательность и формат разметки. В нем есть несколько средств, которые позволяют удалять в документе пробелы и комментарии.
Возможно, у вас на примете есть еще какие-нибудь полезные CSS-инструменты? Пожалуйста, поделитесь ими в комментариях!