Comments 43
Хорошая подборка инструментов для форматирования CSS. Будет полезна в случае разбора чужих проектов.
Использую только 2 сервиса: codebeautifier.com (практически тоже самое, что и cleancss, только в более удобной и приятной форме + немного больше настроек) и css-reorder (сортировка CSS свойств). Этих сервисов хватает с лихвой.
Добавила в пост ссылку на codebeautifier, спасибо.
CSS reorder назывался так на ранних стадиях разработки. Теперь проект называется CSScomb, о чем свидетельствует твит-канал @csscomb и сайт CSScomb.ru. Как я уже написал ниже: очень скоро будет большое обновление сервиса и плагинов. Буду рад любым предложениям/замечаниям/баг-репортам в твиттер или на почту.
Буквально на днях познакомился плотно с LESS (lesscss.org)… После этого все инструменты выглядят жалкими поделками. Работать с Less + LessApp (Watcher+Compiler) + Coda (к сожалению только она одна поддерживает синтаксис, да и то не совсем полностью) — одно удовольствие. Нет нагромождений и т.д., больше к чистому CSS — наврядли вернусь… )
UFO just landed and posted this here
А за что минусы? Парень дело говорит: SASS+Compass значительно упрощают написание стилей.
На самом деле кому как :) Не холивара ради, но я пробовал, мне не удобно. В комментариях к статьям на эту тему на smashingmagazine.com видел довольно много людей с похожим взглядом на less/sass.
Мне сначала понравился 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»); }
}
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»); }
}
$russian_mat: fuck-fuck-fuck-fuck-fuck;
Netbeans 6.9.1 в MacOS X проц грузит на полную, а в Netbeans 7.0beta отсуствует поддержка плагина SASS и LessCSS… ну что за $russian-mat…
Netbeans 6.9.1 в MacOS X проц грузит на полную, а в Netbeans 7.0beta отсуствует поддержка плагина SASS и LessCSS… ну что за $russian-mat…
Единственный нормальный вариант вышел — это продолжать использовать Netbeans 7 для PHP+Smarty, а вот для CSS+SASS — Coda+SASS.Mode (в котором тоже можно юзать терминал)… и остается уповать и ждать когда доделают нормально netbeans 7… :(
И вот собственно говоря что мы имеем в итоге:
(простите за линк, если кто посчитает нужным можете вставить картинкой)
habreffect.ru/files/721/9d2ed6b50/45.png
(простите за линк, если кто посчитает нужным можете вставить картинкой)
habreffect.ru/files/721/9d2ed6b50/45.png
Что-то не так. У меня LessCSS под NetBeans 7.0b отлично работает. Так что не все так плохо, попробуйте поставить заново IDE :)
Поторопился. Вообщем-то, работает только форматирование.
Не-не… к LESS не вернусь… Оно еще слишком сырое, хоть и красивое… мне SASS больше нравится… Да и к Coda для этого уже привык за день… несколько неудобно конечно, но зато есть и autocomplete css-кода и терминал для watcher'a… посмотрите на скриншоте выше… )
IDE от JetBrains, ориентированные на веб-разработку замечательно форматируют и css и html. Но за Styleneat спасибо.
На мой взгляд, можно обойтись и без подобных сервисов, достаточно имет хороший текстовый редактор, большинство из вышеобозначенных функций в котором встроены.
Очень нужная информация. Основное применение думаю найти в своих (и не только) старых проектах.
Не всегда красиво отформатированный CSS можно привести к удобочитаемому виду.
А вот в обратную сторону для этого у меня есть CSSmin.
Не всегда красиво отформатированный CSS можно привести к удобочитаемому виду.
А вот в обратную сторону для этого у меня есть CSSmin.
Забыли отечественную разработку CSSComb / csscomb.ru — сортировщик свойств по группам, описанным в документации к Zen Coding.
С утра обязательно добавлю в обзор. Спасибо.
Скоро будет большое обновления сервиса. Следите за твит-каналом @csscomb
UFO just landed and posted this here
сделаю как раз css-min, по аналогии с jquery)
По юзал клеаны, 56кб css 15 файлов, ужалось на 2кб что смеяться то. Да пишу ужато в одну строку.
спасибо за обзор, пригодится
Кто-нибудь действительно пользовался хоть одним из этих сервисов в своей работе? Создается впечатление, что никто всерьез не использует эти утилиты, даже их разработчики. Все это по довольно понятным мне причинам…
styleneat.com — выдает неожиданный результат даже при простейшем тест-кейсе. Попробуйте сами скормить ему простецкий код:
Сортировка свойств по алфавиту вызывает отдельную улыбку :) Жаль, что автор сервиса не понимает разницу между группировкой свойств ради группировки и группировкой по функциональному признаку.
Сортировка селекторов по алфавиту — за пределами добра и зла.
FormatCSS — Те же странности + съедает все комментарии и нарушает табуляцию вложенных свойств. Как с этим жить не ясно совсем.
CleanCSS вызвал удивление обильными сообщениями после процесса обработки CSS, в которых указана строка но никак нельзя перейти на нее. Похоже, чтобы воспользоваться этим сервисом нужно быть роботом.
ProCSSor оказался со странным набором настроек Brace Style, в которых нет того, что нужно, а то, что есть кажется совершенно далеким от жизни. В сортировке свойств автор сервиса решил совершить инновационный прорыв позволив пользователю сортировать свойства не только по алфавиту но и по длине!
В итоге я не совсем понимаю зачем городить весь этот огород, если все сервисы делают то, что совершенно не нужно веб-технологам: сортировка свойств по алфавиту и ломание уже созданного форматирования :) Я занимаюсь вопросом пересортировки CSS-кода уже давно и мой опыт подсказывает, что нужны банальные вещи:
Последний месяц я занимался механизмом такой обработки CSS и скоро представлю его публике. Если интересно следите за @csscomb. А пока предыдущая версия доступна как онлайн-сервис и плагины для Textmate и Code на сайте csscomb.ru
P.S. Как же не хватает Zen Coding for Textarea на хабре.
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 на хабре.
доступная сейчас версия тоже не лишена странностей.
Кидаю туда такой код:
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;
}
кто-то говорил о том, что не нужно рушить уже созданное форматирование?
Кидаю туда такой код:
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;
}
кто-то говорил о том, что не нужно рушить уже созданное форматирование?
В своё время пользовалась всеми вышеперечисленными сервисами. До сих пор испольую последний. Ни разу не сталкивалась с подобными тружностями) Наверное, у меня запросы к инструменту попроще и поэтому я вполне довольна результатом, который он выдаёт.
Есть замечательный Css tidy и его оптимизатор.
csstidy.sourceforge.net/
cdburnerxp.se/cssparse/css_optimiser.php
Работают не только online.
csstidy.sourceforge.net/
cdburnerxp.se/cssparse/css_optimiser.php
Работают не только online.
Классная подборка. Особено приглянулся первый ИМХО
«Надеюсь, что инструменты, описанные ниже, помогут вашему коду приблизиться к идеалу.»
К идеалу css приведёт только собственная голова и руки)
Но данное высказывание не делает бесполезными данные программульки, они могут пригодится, особенно когда цсс сжат аналогичной прогой в одну строчку для экономии килобайтов.
Спасибо за подборку.
К идеалу css приведёт только собственная голова и руки)
Но данное высказывание не делает бесполезными данные программульки, они могут пригодится, особенно когда цсс сжат аналогичной прогой в одну строчку для экономии килобайтов.
Спасибо за подборку.
Большое спасибо за подборку!
Sign up to leave a comment.
Инструменты для форматирования CSS-кода