БЭМ on Rails

[@stereodenis]

Хотелось бы каких-нибудь примеров в статье!

[@tony_vi]

Примеры добавлю в вики на гитхабе чуть позже.

[@navff]

Примеров так и нет в вики на гитхабе

[@asavin]

Одна директория с блоками для всех проектов на Ruby on Rails.

Уверены?
Блоки удобнее разделять на библиотеки. Библиотеки — подключать к проектам. На уровне проекта переопределять блоки.
Плохо представляю, как тут обойтись одной директорией.

bem-tools не подходит по вполне понятным причинам

Я не совсем понимаю, по каким.Только из-за того, что инструмент написан не на руби, вы решили писать свою реализацию? Или есть какие-то объективно веские причины?

Про deps.js можно забыть.

Забыть про автоматическое разруливание зависимостей и разгребать их руками?

Чтобы его использовать можно было бы подключить в рельсы V8 и компилировать шаблоны. Но тогда от рельс мало чего остается и это далеко не Ruby way.

Рельсы — это разве только шаблоны?

[@tony_vi]

Спасибо за вопросы. Я бы не хотел чтобы вы думали, что этот гем некоторая конкуренция bem-tools или что-то подобное. Я бы хотел чтобы было совсем наоборот.

Давайте по порядку.

Уверены?

Пока уверен. Задачи о которых вы говорите вполне реализуемы группами блоков. Да, вы правы, доопределение отсутствует, но я и делал пока минимально работающий функционал, который позволит мне удобно переносить блоки между рельсовыми проектами. Если будет интерес и необходимость я обязательно добавлю такую возможность. На уровне проекта пока вы можете дописать стили так как вы это привыкли делать. Сейчас просто нужно побольше думать о том, какие блоки выносить.

Я не совсем понимаю, по каким.

Добавил в статью.

Забыть про автоматическое разруливание зависимостей и разгребать их руками?

Вы видимо пропустили описание процесса сборки ассетов. Все собирается автоматически. Я хотел сказать, что вам не нужно для бандлов прописывать зависимости от блоков/элементов/модификаторов.

Рельсы — это разве только шаблоны?

В том то и дело, что нет. Рельсы это целая культура.

[@asavin]

Доопределение блоков — не только css, но и логики, и шаблонов — мне кажется, нужно обязательно.
Про ассеты не пропустил, в части про ассеты нет ничего про разруливание зависимостей между блоками. Или это я что-то не так понял?

[@tony_vi]

Я видимо тоже не совсем понимаю, что вы имеете ввиду про ассеты. Можно поподробнее вопрос? Согласен, что доопределение блоков очень нужная функциональность, но в текущей реализации ее нет, возможно появится позже.

[@asavin]

Я имею в виду, что, используя bem-tools и deps.js,. я могу указать, что блок А зависит от блока Б, а блок Б от блока С. Потом подключить к странице блок А — и получить собранные в правильном порядке скрипты и стили всех трех блоков.

[@tony_vi]

Я понял. Вообще я не поддерживаю политику зависимости блоков друг друга. Сейчас вы это не сможете реализовать, если только не пропишите в явном виде классы в шаблоне. С яваскриптом сложнее. Учту на будущее. Спасибо за комментарий. Порядок сборки блоков можно регулировать пока только в файлах application.css, application.js, где ведется список всех компилируемых блоков.

[@asavin]

Вообще я не поддерживаю политику зависимости блоков друг друга.

Блоки зависят друг от друга, в любом случае. Простейший пример — блок формы зависит от блоков инпутов.
Кроме того, блоки зависят от своих элементов. Бывает, что один блок с разными модификаторами зависит от разного набора элементов.

Порядок сборки блоков можно регулировать пока только в файлах application.css, application.js, где ведется список всех компилируемых блоков.

Опасный подход. Ручное разруливание зависимостей ведет ошибкам. Хотя бы что-нибудь вроде require.js используйте, что ли. Но, видите — require он все-таки про js. а deps.js — про любые технологии.

[@tony_vi]

Продукт крайне сырой и желать от него полной идентичности bem-tools и функциональности рано. Спасибо за наставления. Я постараюсь все это учесть в будущем.

[@mursya]

Привет!
А ты читал про второй митап по БЭМ на YaC 2013 в Москве, который будет 2 октября? Мы хотим собрать наше коммьюнити и обсудить разные темы. БЭМ + Ruby вполне могло бы быть одной из них.

ru.bem.info/blog/2013/09/bemup-yac2013/

[@tony_vi]

Привет! Читал конечно! На YaC зарегистрировался. Хотел подать заявку, чтобы выступить с темой, но не успел до 10го сентября.

[@mursya]

Подавай к нам на митап =)

[@mursya]

если решиь, напиши до среды максимум. хотим в чт программу объявить.

[@tony_vi]

Понял, ок. Напишу завра, во вторник, ок?:)

[@mursya]

ага!
круто, что слоган наш прижился =) прям душу греет!

[@vithar]

«Группа блоков» в БЭМ методологии называется «уровень переопределения». В bem-tools это параметр -l

[@installero]

Известно ли автору какое-нибудь не такое ядерное и, фактически, заменяющее html-нотацию, решение, помогающее генерировать css-классы у элементов в соответствии с БЭМ?

Было бы здорово, если бы можно было б написать, например:

<%= block name: 'user' do %>
  <div>
    <p class="_name">
      <%= user.name %>
    </p>
    <p class="_age">
      <%= user.age %>
    </p>
  </div>
<% end %>

и получить на выходе:

<div class=”b-user”>
  <p class="b-user_name">
     <%= user.name %>
  </p>
  <p class="b-user_age">
    <%= user.age %>
  </p>
</div></code>

[@tony_vi]

Такого решения нет. К сожалению или нет не знаю. А чем сложнее писать <%= e «element» %>?

[@installero]

Не совсем Вас понял. Как бы выглядел мой код с <%= e «element» %>?

[@tony_vi]

Видимо я тоже не все понял. Выглядело бы вот так:

= b "test", mods: [{color: "red"}], content: [{ elem: "icon", elemMods: [{size: "small"}] }]

Оформи хотелку в issues, пожалуйста, я поразмышляю. Гем так или иначе ждут большие перемены и интеграция с bem-tools, возможно туда получится добавить твою просьбу.

[@installero]

Давайте сперва разберёмся.

Меня расстраивает, что приведённый код уже далеко не html и даже не haml. Быть может, я старомоден, но я не вижу ничего плохого в html. Я очень надеюсь, что автор не предлагает все элементы на странице генерировать с помощью подобных конструкций. Мне кажется, это довольно непросто читать.

Сравните:

<div class="user">
  <p class="user_name">
    <%= user.name %>
  </p>
  <p class="user_age">
    <%= user.age %>
  </p>
</div>

c

<%= b "test", content: [
  { elem: "name", content: user.name },
  { elem: "age", content: user.age }
] %>

blocks/user/user.html.erb
<div class="user">
  <%= content %>
</div>

blocks/user/elements/name.html.erb

<p class="user_name">
  <%= content %>
</p>

blocks/user/elements/name.html.erb

<p class="user_age">
  <%= age %>
</p>

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

[@tony_vi]

Не нужно — не делай. Мысль какрас в том чтобы писать таким образом те блоки, которые ходят из проекта в проект. Это есть тот самый haml, b — хелпер всего лишь. Ты можешь писать как привык на haml и вставлять в общий код переносимые блоки, это не новый шаблонизатор ни в коем случае, не думай так. В итоге тебе нужен хелпер генерации классов, тк писать ручками лень, ок. Пиши в хотелки.

[@installero]

Ну отлично. Этого я и хотел, в общем-то, услышать.

[@tony_vi]

Еще в пользу отсутсвия такого, что гем имеет настраиваемый синтаксис БЭМ нотации. Не все пишут именно так, то есть не все так разделяют элементы и модицикаторы. В Европе принят несколько другой синтаксис. Хорошо бы такие пожелания направлять сразу в issues на GitHub.

[@installero]

Ну, синтаксис разделения блока-элемента-модификатора действительно не принципиален, подошёл бы любой.