Emmet LiveStyle — инструмент для удобной front-end разработки

[@Rubaka]

Минусы, ограниченность только Sublime Text. Нужно добавить поддержку других редакторов

[@c01nd01r]

Специально установил ST, что б попробовать. Спасибо, отлично работает!
Кстати, Netbeans 7.4 beta из коробки примерно так же умеет

[@dshster]

Куда им о багах писать? Вешает намертво ST3 при вставке или редактировании строки с открытой фигурной скобкой. Три раза повторил и три раза завис не сохраняя, естественно.

[@c01nd01r]

Могу предположить, что сюда:
github.com/emmetio/livestyle-web/issues

[@dew1983]

Спасибо за наводку.

[@dew1983]

Еще раз спасибо. Использую sass.

[@dew1983]

Кстати, для compass используется firecompass.

[@Remitmaster]

Замечу что подерживает работу с less

[@Alexblbl]

Portable Sublime Text 2, не видит редактор.
Пишет «No active editor».

[@MindMinimal]

Тоже это заметил. В целом не особо критично, но всеравно неприятно.

[@nill]

Чем это лучше LiveReload? Он работает из любой IDE и не требует расширения для браузера.

[@dshster]

Могу предположить, что отсутствие «левого» отладочного кода в теле страницы, который можно «забыть» убрать при выгрузке на продакшн, во-вторых установка и настройка гораздо более очевидная, я вот даже сходу не нашел на двух страницах как настроить livereload — вижу как вставить «виджет», но не вижу как настроить серверную часть.

Здесь же нет «серверной» части как таковой, а Sublime Text практически де-факто для фронт-енд разработки, единственное хотелось бы в дальнейшем получить версию под firebug, ну и исправить баги, конечно.

[@Suor]

Самое большое отличие — LiveReload работает только в одну сторону. Изменения, сделанные в браузере, в редактор не пробрасываются.

[@VasilioRuzanni]

Так то все реально здорово, но неужели кто-то до сих пор использует голый CSS для разработки фронтенда? Поддержку LESS/SASS/Stylus бы. Понимаю сложность, но было бы круто.

[@dshster]

Пользуюсь, мне удобно, сделал несколько сайтов на less, но сейчас перешел обратно на css. Less удобен для стандартизирования и типизирования больших объемов типового оформления, с этим не поспоришь, Но разовые сайты с уникальным дизайном смысла нет делать на less — скорости не прибавляет, зато прибавляет хлопот в дальнейшем при мелких правках.

[@VasilioRuzanni]

Возможно, зависит от подхода. Но комбинирование селекторов, относительные стили и mixins — LESS/Stylus удобен везде, где нужно писать CSS (кроме совершенно простых случаев). Уникальность дизайна тут роли не играет. А мелкие правки — не сложнее, чем при простом CSS (ну разве что чуток — надо настроить компиляцию).

[@VasilioRuzanni]

Существенность — очень относительная и субъективная величина. Но все эти «мелочи» вместе невероятно увеличивают производительность.

Тот же Emmet позволяет кодить еще быстрее, он же помогает с префиксами (впрочем, сгодятся любые сниппеты).

Препроцессоры не исключают написание CSS-свойств. Нельзя сравнивать LESS и Emmet — в идеале должны использоваться вместе.

Стилями лучше всего управляться методологией БЭМ — только она спасает на сколь-либо серьёзных проектам, впрочем, преимущества видны уже почти сразу.

Не могу пока объективно рассуждать насчет БЭМ, но это немного другой подход, и, несмотря на то, что его концепция пересекается с препроцессорами, опять же можно использовать все сразу.

От переменных толку мало — реально значения меняются очень редко, и в таких случаях их легко заменить поиском и заменой: sed проходится по css'кам очень быстро.

При правильной организации — это убойная штука. Особенно для поддержки «цветов темы» и создания относительных цветов (темнее/светлее/прозрачнее/насыщеннее/итд)

Насчет недостатков согласен (кроме первого), но у всего есть свои недостатки.

[@might]

Отличный инструмент, жаль только, что пока мозилла не поддерживается.

[@might]

Ещё забыл добавить, что было бы неплохо, чтобы можно было редактировать не только файлы стилей, но и html код открытой страницы (взять хотя бы то, что не редко приходится создавать/редактировать страницы с инлайн стилями, пример: html письма).

[@pietrovich]

Не нашел запрос в трекер PhpStorm'а, добавил. Голосуем, просим, просим!
P.S.: в тред призываются neuro159 и philipto

[@neuro159]

www.youtube.com/watch?v=wCVwdvufTds?

[@pietrovich]

Алексей, ну кому как не вам, знать о том что Шторм может и чего не может. И как вы упустили что ваш Live Edit (за который отдельное спасибо, он клёвый) это только половина от того что предлагает LiveStyle я не знаю. Но то, что в Live Edit нет двустороннего обмена изменениями факт, а хотелось бы чтобы оно было. Потому и оформил реквест и зазывал вас сюда — посмотреть, проникнуться и сделать Шторм еще клёвее.

[@VSOP_juDGe]

Хочу такую штуку в шторм, только умнее. Чтобы редактировать верстку в хроме, а она сама менялась в php-шаблоне! :)

[@funca]

Кстати, Chrome 29 версии уже почти подобрался к возможностям плагина (см. habrahabr.ru/post/182036/), а в Chrome 30 это уже практически из коробки (см. Live editing).
Если коротко:

1. Открыть chrome://flags/#enable-devtools-experiments, включить галку, перезапустить.
2. Devtools / Settings / Expriments чекнуть галку «FileSystem inspection»
3. Devtools / Settings / Workspace добавить директорию с ресурсами сайта, и прописать маппинг адреса на сервере и пути относительно выбранной директории ( http://localhost:8080/ -> / или что-то типа этого).

теперь все изменения, сделанные в Chrome, автоматически сохраняются в файловой системе, а изменения в текстовом редакторе отражаются в браузере (возможно, для этого надо открыть исходник файла в редакторе Chrome).

офф: для bem-tools (если вдруг) можно подключать на страницу index.css, вместо _index.css, тогда магия с путями работает правильно.

где-то тут же есть поддержка Source Map

[@chikuyonok]

Проблема подхода в Chrome Workspaces в том, что он становится бесполезным, если работаете с сайтом, где CSS собирается из нескольких файлов, а потом ещё и минифицируется. С LiveStyle таких проблем нет: вы сможете смапить два абсолютно разных файла (например, исходный модуль CSS в редакторе → скомпилированный CSS в браузере) и использовать их для живого редактирования.

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

[@funca]

Думаю проблема подхода еще и от фреймворка зависит. В хроме вопросы со сборкой и минификацией сейчас решаются тупо подключением source map, что дает возможность прямо в «инспекторе» редактировать прямо исходники (sass, например). Кейс с внешним редактором так же работает — хром следит за изменениями в исходниках и обновляет окна когда нужно. Но я вовсе не утверждаю, что этот способ универсален — бывает ведь и такое github.com/LearnBoost/stylus/pull/886 :)

[@chikuyonok]

Проблема source maps в том, что они годятся только для просмотра. Как только вы что-нибудь поменяете в сгенерированном CSS или в исходном файле препроцессора — source map становится невалидным и его нужно заново сгенерировать. В итоге для того, чтобы увидеть любое изменение, нужно сначала сохранить файл, дождаться, пока он перегенерируется, потом дождаться, пока Chrome по таймауту подцепит изменения. То есть не совсем «живое» редактирование.

LiveStyle пытается иначе решить эту проблему: свойства в селекторах напрямую мапятся из CSS в препроцессор и наоборот. Тогда получается действительно живое редактирование, фрагмент показан в демо-видео. Маппинг селекторов, в большинстве случаев, относительно простой, но есть проблемы с маппингом миксинов, переменных и прочего. Поэтому я сейчас исследую, как это можно заставить работать правильно и удобно.

[@mihalich]

Что-то не ставится в Хром — «Произошла ошибка, повторите попытку»

Хром последний стабильный Версия 28.0.1500.95 m

[@mihalich]

заработало

[@Finom]

Хочу для NPP. Так и не получилось пересесть за Sublime Text из-за субъективных тормозов.

[@ElForastero]

Как альтенративу можно рассмотреть Guard Livereload: github.com/guard/guard-livereload
Так же имеется плагин к Sublime Text, но дабы работал с каждым редактором, необходима установка Guard'a.
Работает с файлами любого формата — css, less, sass, js, html, php… Задействуется при сохранении.

[@omarr]

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