Блогово Зайсла: 2011

Любите ли вы свой CSS-код так, как люблю его я? Если да, то, несомненно, стремитесь к тому, чтобы он не только хорошо себя вёл и чувствовал, но и приятно выглядел

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

1. Styleneat

Вероятно, самый простой сервис из представленных в обзоре.

Возможностей у инструмента не так много:

Сортировка свойств по алфавиту
Сортировка селекторов по алфавиту (если стоит галочка "Safe Organize" (безопасное форматирование) – этот параметр не доступен)
Возможность выбрать стиль форматирования: многострочное или в одну строку
Умеет вытягивать CSS-файлы, подключенные с помощью @import, в основной файл и безжалостно их обрабатывать
Можно передать код на обработку с помощью: текстового поля, загрузив файл или указав ссылку на CSS
Результат можно забрать в виде CSS-кода или загрузить файл

2. FormatCSS

Не смотря на свой грозный вид, инструмент прекрасно справляется со своими функциями, коих у него предостаточно.
Настроить можно многое:

расстановку пробелов/табов/новых строк,
сортировку свойств и имён селекторов,
преобразование имён свойств и селекторов в нижний регистр и т.п.

Чем мне особо приглянулся данный сервис: умением форматировать "лесенкой" субправила (я считаю это очень удобным способом организации стилей).

3. CleanCSS

Достаточно мощный инструмент, предоставляющий в наше распоряжение множество возможностей:

Скормить CSS можно копипастом в поле "CSS-Code" или в виде ссылки на файл стиля
Получить результат можно в виде текста или в файл
На выбор пользователя предоставлены 4 типа форматирования исходника: код может быть оптимизирован для наименьшего размера или, наоборот, для лучшей читабельности. Есть возможность задать шаблон форматирования в поле "Custom temlate"
Умеет объединять правила, приводить запись свойств к короткому виду
Если необходимо – удалит комментарии и невалидные определения
Как и вышеописанные сервисы, с радостью отсортирует всё, что душе угодно по алфавиту и преобразует в нижний/верхний регистр

Кстати, в основе данного сервиса обнаруживается движок "CSSTidy" – опенсурсный CSS-парсер/оптимизатор. Так что, все желающие свободно могут изобразить на его базе свой собственный бьютифер, с блэкджеком и переключателями.
Близнец это сервиса: CodeBeautifier. Набор функций практически идентичен CleanCSS (сервис тоже работает на CSSTidy).

4. ProCSSor

На мой искушенный взгляд – самое удобное из всего представленного в данном обзоре.

Сервис встречает пользователя приятным интерфейсом и очень наглядными всплывающими подсказками, позволяющими очень быстро разобраться с настройками.

Как и любой уважающий себя бьютифер, ProCSSor примет от нас код в поле ввода, в виде файла или ссылки. Отдаст результат в браузер и выведет ссылку на скачивание файла.

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

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

Ещё одна достопримечательность – ProCSSor предоставляет API, с документацией можно ознакомиться здесь: http://procssor.com/apidoc.pdf.