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

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

    Similar posts

    Comments 43

      +3
      Хорошая подборка инструментов для форматирования CSS. Будет полезна в случае разбора чужих проектов.
        0
        Спасибо, а есть у вас такой же, только с перламутровыми (зачеркнуто) только для HTML?
        +3
        Использую только 2 сервиса: codebeautifier.com (практически тоже самое, что и cleancss, только в более удобной и приятной форме + немного больше настроек) и css-reorder (сортировка CSS свойств). Этих сервисов хватает с лихвой.
          +1
          Добавила в пост ссылку на codebeautifier, спасибо.
            0
            Всегда пожалуйста.
            +1
            CSS reorder назывался так на ранних стадиях разработки. Теперь проект называется CSScomb, о чем свидетельствует твит-канал @csscomb и сайт CSScomb.ru. Как я уже написал ниже: очень скоро будет большое обновление сервиса и плагинов. Буду рад любым предложениям/замечаниям/баг-репортам в твиттер или на почту.
            0
            Буквально на днях познакомился плотно с LESS (lesscss.org)… После этого все инструменты выглядят жалкими поделками. Работать с Less + LessApp (Watcher+Compiler) + Coda (к сожалению только она одна поддерживает синтаксис, да и то не совсем полностью) — одно удовольствие. Нет нагромождений и т.д., больше к чистому CSS — наврядли вернусь… )
            +1
            Если вы действительно любите свой CSS — используйте SASS.
              +3
              А за что минусы? Парень дело говорит: SASS+Compass значительно упрощают написание стилей.
                0
                На самом деле кому как :) Не холивара ради, но я пробовал, мне не удобно. В комментариях к статьям на эту тему на smashingmagazine.com видел довольно много людей с похожим взглядом на less/sass.
                  0
                  Мне сначала понравился LessCSS из-за простоты + маковский watcher LessApp просто визуально понравился ну и + JS… но когда столкнулся с простейшей задачей с генерацией URLов, то Less тут же и подвел… банальная операция казалось бы, но конкатенацию строк и вообще работа со строками в LESS еще не производится. Поэтому попробовал SASS… Перевод небольшого LESS-файла (на 500 строк) в SASS отнял буквально 5 минут. SASS под Netbeans 6.9.1 тоже есть + в терминале IDE запущен sass-watcher. Вобщем у less идея хорошая, какая-то приятная визуально, SASS против нее похож на какого-то монстра (но мне кажется, что им просто надод сменить сайт и сделать его веселее :)).
                  PS: нет я просто по-детски радуюсь такой возможности и в шоке почему я раньше этим не пользовался:
                  $default-domain-url: "../../";
                  $default-images-path: $default-domain-url+«images/»;
                  $default-icons-path: $default-images-path+«icons/»;
                  a {
                  &.ico1 { background: url($default-icons-path+«icon1.png»); }
                  &.ico2 { background: url($default-icons-path+«icon2.png»); }
                  &.ico3 { background: url($default-icons-path+«icon3.png»); }
                  }
                    0
                    $russian_mat: fuck-fuck-fuck-fuck-fuck;

                    Netbeans 6.9.1 в MacOS X проц грузит на полную, а в Netbeans 7.0beta отсуствует поддержка плагина SASS и LessCSS… ну что за $russian-mat…
                      0
                      Единственный нормальный вариант вышел — это продолжать использовать Netbeans 7 для PHP+Smarty, а вот для CSS+SASS — Coda+SASS.Mode (в котором тоже можно юзать терминал)… и остается уповать и ждать когда доделают нормально netbeans 7… :(
                        0
                        И вот собственно говоря что мы имеем в итоге:
                        (простите за линк, если кто посчитает нужным можете вставить картинкой)

                        habreffect.ru/files/721/9d2ed6b50/45.png
                        0
                        Что-то не так. У меня LessCSS под NetBeans 7.0b отлично работает. Так что не все так плохо, попробуйте поставить заново IDE :)
                          0
                          Поторопился. Вообщем-то, работает только форматирование.
                            0
                            Не-не… к LESS не вернусь… Оно еще слишком сырое, хоть и красивое… мне SASS больше нравится… Да и к Coda для этого уже привык за день… несколько неудобно конечно, но зато есть и autocomplete css-кода и терминал для watcher'a… посмотрите на скриншоте выше… )
                  +4
                  IDE от JetBrains, ориентированные на веб-разработку замечательно форматируют и css и html. Но за Styleneat спасибо.
                    0
                    IDE от JetBrains вобще много чего хорошо форматируют ;)
                    +2
                    На мой взгляд, можно обойтись и без подобных сервисов, достаточно имет хороший текстовый редактор, большинство из вышеобозначенных функций в котором встроены.
                      +1
                      Очень нужная информация. Основное применение думаю найти в своих (и не только) старых проектах.
                      Не всегда красиво отформатированный CSS можно привести к удобочитаемому виду.

                      А вот в обратную сторону для этого у меня есть CSSmin.
                        +2
                        Забыли отечественную разработку CSSComb / csscomb.ru — сортировщик свойств по группам, описанным в документации к Zen Coding.
                          0
                          С утра обязательно добавлю в обзор. Спасибо.
                            +1
                            Скоро будет большое обновления сервиса. Следите за твит-каналом @csscomb
                        • UFO just landed and posted this here
                            0
                            сделаю как раз css-min, по аналогии с jquery)
                              0
                              По юзал клеаны, 56кб css 15 файлов, ужалось на 2кб что смеяться то. Да пишу ужато в одну строку.
                                0
                                спасибо за обзор, пригодится
                                  +12
                                  Кто-нибудь действительно пользовался хоть одним из этих сервисов в своей работе? Создается впечатление, что никто всерьез не использует эти утилиты, даже их разработчики. Все это по довольно понятным мне причинам…

                                  styleneat.com — выдает неожиданный результат даже при простейшем тест-кейсе. Попробуйте сами скормить ему простецкий код:
                                  div {
                                      position:absolute;
                                      top:0;
                                      left:0;
                                      }


                                  Сортировка свойств по алфавиту вызывает отдельную улыбку :) Жаль, что автор сервиса не понимает разницу между группировкой свойств ради группировки и группировкой по функциональному признаку.

                                  Сортировка селекторов по алфавиту — за пределами добра и зла.

                                  FormatCSS — Те же странности + съедает все комментарии и нарушает табуляцию вложенных свойств. Как с этим жить не ясно совсем.

                                  Чем мне особо приглянулся данный сервис: умением форматировать “лесенкой” субправила (я считаю это очень удобным способом организации стилей).
                                  Я попробовал живой файл mrprn.ru/s/common2.css?v2 отформатировать так, чтобы была лесенка… Ничего путного не случилось…

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

                                  ProCSSor оказался со странным набором настроек Brace Style, в которых нет того, что нужно, а то, что есть кажется совершенно далеким от жизни. В сортировке свойств автор сервиса решил совершить инновационный прорыв позволив пользователю сортировать свойства не только по алфавиту но и по длине!

                                  В итоге я не совсем понимаю зачем городить весь этот огород, если все сервисы делают то, что совершенно не нужно веб-технологам: сортировка свойств по алфавиту и ломание уже созданного форматирования :) Я занимаюсь вопросом пересортировки CSS-кода уже давно и мой опыт подсказывает, что нужны банальные вещи:
                                  1. дать пользователю настраивать порядок сортировки CSS-свойств
                                  2. не портить уже созданное форматирование (изменить его может любой умный редактор кода)
                                  3. обрабатывать правильно CSS-код из реальной жизни: expressions, @media, CSS3-свойства, хаки, комментарии, LESS/SASS и прочее.

                                  Последний месяц я занимался механизмом такой обработки CSS и скоро представлю его публике. Если интересно следите за @csscomb. А пока предыдущая версия доступна как онлайн-сервис и плагины для Textmate и Code на сайте csscomb.ru

                                  P.S. Как же не хватает Zen Coding for Textarea на хабре.
                                    0
                                    доступная сейчас версия тоже не лишена странностей.
                                    Кидаю туда такой код:

                                    div.description h2 {
                                    font-weight: bold;
                                    padding-bottom: 4px;
                                    }

                                    div.description ul li {
                                    background: url(../images/top-marker.png) left 4px no-repeat;
                                    padding-left: 14px;
                                    }

                                    На выходе получаю такой:

                                    div.description h2 {
                                    padding-bottom: 4px;
                                    font-weight: bold;
                                    }div.description ul li {
                                    padding-left: 14px;
                                    background: url(../images/top-marker.png) left 4px no-repeat;
                                    }

                                    кто-то говорил о том, что не нужно рушить уже созданное форматирование?
                                      0
                                      Это не секрет, текущая версия алгоритма не далеко ушла от выше перечисленных версий по безбажности, хоть и предоставляет некоторые уникальные возможности. Поэтому я не прекратил разработку и занимаюсь второй версией алгоритма. Потерпите еще чуть-чуть.
                                    0
                                    В своё время пользовалась всеми вышеперечисленными сервисами. До сих пор испольую последний. Ни разу не сталкивалась с подобными тружностями) Наверное, у меня запросы к инструменту попроще и поэтому я вполне довольна результатом, который он выдаёт.
                                    0
                                    Есть замечательный Css tidy и его оптимизатор.

                                    csstidy.sourceforge.net/
                                    cdburnerxp.se/cssparse/css_optimiser.php

                                    Работают не только online.
                                      0
                                      Классная подборка. Особено приглянулся первый ИМХО
                                        0
                                        «Надеюсь, что инструменты, описанные ниже, помогут вашему коду приблизиться к идеалу.»
                                        К идеалу css приведёт только собственная голова и руки)
                                        Но данное высказывание не делает бесполезными данные программульки, они могут пригодится, особенно когда цсс сжат аналогичной прогой в одну строчку для экономии килобайтов.
                                        Спасибо за подборку.
                                          0
                                          Большое спасибо за подборку!

                                          Only users with full accounts can post comments. Log in, please.