Pull to refresh

Инструменты для форматирования CSS-кода

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


1. Styleneat


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


2. FormatCSS


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

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

3. CleanCSS


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

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

4. ProCSSor


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

5. CSScomb


image
Проект нашего соотечественника, хабрапользователя miripiruni. CSScomb является инструментом для пересортировки CSS-свойств в заданном порядке, подробнее о возможностях можно узнать на этой странице.
Из приятностей:
  • есть плагины для редакторов TextMate, Coda, Webstorm и IntelliJIDEA;
  • существует возможность задавать и сохранять собственные настройки

Автор обещает в ближайшем времени большие обновления сервиса и предлагает следить за каналом @csscomb
Tags:
Hubs:
+76
Comments 43
Comments Comments 43

Articles