ZaiSL 30 янв 2011 в 12:03

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

3 мин

61K

CSS *

+76

Комментарии 43

VitaZheltyakov 30 янв 2011 в 12:14

Хорошая подборка инструментов для форматирования CSS. Будет полезна в случае разбора чужих проектов.

gorenski 31 янв 2011 в 02:37

Спасибо, а есть у вас такой же, только с перламутровыми (зачеркнуто) только для HTML?

helloilya 30 янв 2011 в 13:16

Использую только 2 сервиса: codebeautifier.com (практически тоже самое, что и cleancss, только в более удобной и приятной форме + немного больше настроек) и css-reorder (сортировка CSS свойств). Этих сервисов хватает с лихвой.

ZaiSL 30 янв 2011 в 13:39

Добавила в пост ссылку на codebeautifier, спасибо.

helloilya 30 янв 2011 в 13:56

Всегда пожалуйста.

miripiruni 30 янв 2011 в 21:59

CSS reorder назывался так на ранних стадиях разработки. Теперь проект называется CSScomb, о чем свидетельствует твит-канал @csscomb и сайт CSScomb.ru. Как я уже написал ниже: очень скоро будет большое обновление сервиса и плагинов. Буду рад любым предложениям/замечаниям/баг-репортам в твиттер или на почту.

Vertex 30 янв 2011 в 13:46

Буквально на днях познакомился плотно с LESS (lesscss.org)… После этого все инструменты выглядят жалкими поделками. Работать с Less + LessApp (Watcher+Compiler) + Coda (к сожалению только она одна поддерживает синтаксис, да и то не совсем полностью) — одно удовольствие. Нет нагромождений и т.д., больше к чистому CSS — наврядли вернусь… )

TheShock 30 янв 2011 в 13:50

Я использую LessCSS плагин в Netbeans

Vertex 30 янв 2011 в 14:19

Где Вы его нашли?! Дайте! Заранее спасибо… :)
PS: А кто минус Вам поставил — тот дурак )

TheShock 30 янв 2011 в 16:36

plugins.netbeans.org/PluginPortal/faces/PluginDetailPage.jsp?pluginid=32782 =)

drzerg 30 янв 2011 в 20:14

Благодарю, а на haml есть плагин?

TheShock 30 янв 2011 в 20:41

Не искал =)
www.google.com.ua/search?q=netbeans+haml+plugin
www.google.com.ua/search?q=netbeans+haml+support
www.google.com.ua/search?q=netbeans+haml+module

Vertex 30 янв 2011 в 22:14

Нет, все-таки еще много раз Спасибо!

НЛО прилетело и опубликовало эту надпись здесь

twenty 30 янв 2011 в 15:25

А за что минусы? Парень дело говорит: SASS+Compass значительно упрощают написание стилей.

Hellcunt 30 янв 2011 в 20:50

На самом деле кому как :) Не холивара ради, но я пробовал, мне не удобно. В комментариях к статьям на эту тему на smashingmagazine.com видел довольно много людей с похожим взглядом на less/sass.

Vertex 31 янв 2011 в 01:01

Мне сначала понравился 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»); }
}

Vertex 31 янв 2011 в 01:46

$russian_mat: fuck-fuck-fuck-fuck-fuck;

Netbeans 6.9.1 в MacOS X проц грузит на полную, а в Netbeans 7.0beta отсуствует поддержка плагина SASS и LessCSS… ну что за $russian-mat…

Vertex 31 янв 2011 в 02:36

Единственный нормальный вариант вышел — это продолжать использовать Netbeans 7 для PHP+Smarty, а вот для CSS+SASS — Coda+SASS.Mode (в котором тоже можно юзать терминал)… и остается уповать и ждать когда доделают нормально netbeans 7… :(

Vertex 31 янв 2011 в 02:49

И вот собственно говоря что мы имеем в итоге:
(простите за линк, если кто посчитает нужным можете вставить картинкой)

habreffect.ru/files/721/9d2ed6b50/45.png

shadeR 31 янв 2011 в 17:47

Что-то не так. У меня LessCSS под NetBeans 7.0b отлично работает. Так что не все так плохо, попробуйте поставить заново IDE :)

shadeR 31 янв 2011 в 17:49

Поторопился. Вообщем-то, работает только форматирование.

Vertex 31 янв 2011 в 18:35

Не-не… к LESS не вернусь… Оно еще слишком сырое, хоть и красивое… мне SASS больше нравится… Да и к Coda для этого уже привык за день… несколько неудобно конечно, но зато есть и autocomplete css-кода и терминал для watcher'a… посмотрите на скриншоте выше… )

DeusModus 30 янв 2011 в 13:54

IDE от JetBrains, ориентированные на веб-разработку замечательно форматируют и css и html. Но за Styleneat спасибо.

pmurzakov 30 янв 2011 в 17:12

IDE от JetBrains вобще много чего хорошо форматируют ;)

Dimox 30 янв 2011 в 14:41

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

dapmoed 30 янв 2011 в 15:01

Очень нужная информация. Основное применение думаю найти в своих (и не только) старых проектах.
Не всегда красиво отформатированный CSS можно привести к удобочитаемому виду.

А вот в обратную сторону для этого у меня есть CSSmin.

pepelsbey 30 янв 2011 в 17:59

Забыли отечественную разработку CSSComb / csscomb.ru — сортировщик свойств по группам, описанным в документации к Zen Coding.

ZaiSL 30 янв 2011 в 19:09

С утра обязательно добавлю в обзор. Спасибо.

miripiruni 30 янв 2011 в 21:53

Скоро будет большое обновления сервиса. Следите за твит-каналом @csscomb

НЛО прилетело и опубликовало эту надпись здесь

igla 30 янв 2011 в 19:36

сделаю как раз css-min, по аналогии с jquery)

Gronpipmaster 30 янв 2011 в 19:44

По юзал клеаны, 56кб css 15 файлов, ужалось на 2кб что смеяться то. Да пишу ужато в одну строку.

mcfalu 30 янв 2011 в 20:28

спасибо за обзор, пригодится

miripiruni 30 янв 2011 в 23:13

Кто-нибудь действительно пользовался хоть одним из этих сервисов в своей работе? Создается впечатление, что никто всерьез не использует эти утилиты, даже их разработчики. Все это по довольно понятным мне причинам…

styleneat.com — выдает неожиданный результат даже при простейшем тест-кейсе. Попробуйте сами скормить ему простецкий код:

div {
    position:absolute;
    top:0;
    left:0;
    }

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

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

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

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

Я попробовал живой файл mrprn.ru/s/common2.css?v2 отформатировать так, чтобы была лесенка… Ничего путного не случилось…

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

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

В итоге я не совсем понимаю зачем городить весь этот огород, если все сервисы делают то, что совершенно не нужно веб-технологам: сортировка свойств по алфавиту и ломание уже созданного форматирования :) Я занимаюсь вопросом пересортировки CSS-кода уже давно и мой опыт подсказывает, что нужны банальные вещи:

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

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

P.S. Как же не хватает Zen Coding for Textarea на хабре.

GoldenHind 31 янв 2011 в 04:00

доступная сейчас версия тоже не лишена странностей.
Кидаю туда такой код:

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;
}

кто-то говорил о том, что не нужно рушить уже созданное форматирование?

miripiruni 31 янв 2011 в 06:43

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

GoldenHind 1 фев 2011 в 14:51

Спасибо

ZaiSL 31 янв 2011 в 05:29

В своё время пользовалась всеми вышеперечисленными сервисами. До сих пор испольую последний. Ни разу не сталкивалась с подобными тружностями) Наверное, у меня запросы к инструменту попроще и поэтому я вполне довольна результатом, который он выдаёт.

Methos 1 фев 2011 в 11:45

Есть замечательный Css tidy и его оптимизатор.

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

Работают не только online.

Kyborg2011 7 фев 2011 в 19:11

Классная подборка. Особено приглянулся первый ИМХО

lastic 17 фев 2011 в 15:24

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

juniorcoder 18 дек 2015 в 06:29

Большое спасибо за подборку!

Зарегистрируйтесь на Хабре, чтобы оставить комментарий