adsPlace_1

Войти или Зарегистрироваться

Hosting Ukraine

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

Любите ли вы свой 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.

5. CSScomb

Проект нашего соотечественника, хабрапользователя miripiruni

CSScomb является инструментом для пересортировки CSS-свойств в заданном порядке, подробнее о возможностях можно узнать на этой странице.

Из приятностей:

  • есть плагины для редакторов TextMate, Coda, Webstorm и IntelliJIDEA;
  • существует возможность задавать и сохранять собственные настройки

Последние из рубрики

Комментарии(0)

  • Комментариев еще нет. Будь первым!

    Оставь свой отзыв

    Для вставки кода используйте кнопки php, html, javascript, css, sql

    * - поля обязательны к заполнению