Вы находитесь на странице: 1из 5

via

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

1. Styleneat

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

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


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

2. FormatCSS

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


функциями, коих у него предостаточно.

Настроить можно многое:


● расстановку пробелов/табов/новых строк,
● сортировку свойств и имён селекторов,
● преобразование имён свойств и селекторов в нижний регистр и т.п.
Чем мне особо приглянулся данный сервис: умением форматировать
“лесенкой” субправила (я считаю это очень удобным способом организации
стилей).

3. CleanCSS

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


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

UPD> В комментариях подсказали ссылку на близнеца это сервиса:


CodeBeautifier. Набор функций практически идентичен CleanCSS (сервис тоже
работает на CSSTidy).

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

Сервис встречает пользователя приятным интерфейсом и очень наглядными


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

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

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


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

Приятной фичей сервиса является возможность сохранить свои настройки,


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