Привет всем! Мы разложили "материальные иконки" от google по БЭМ методологии. репозиторий: https://github.com/appwilio/bem-material-icons

2-4 июля в Яндексе проходил внутренний хакатон по БЭМ-инструментам. Наша команда занималась не совсем обычной задачей - сделать БЭМ-инфраструктуру для платформы .NET (ASP.NET MVC). Хотя это и нельзя будет использовать в Яндексе (в связи с отсутствием веб-проектов на .NET), задача кажется важной, т.к. без этого многие люди не могут использовать БЭМ.

Для возможности использования БЭМ-инструментов на .NET нужно две вещи:

написать .NET библиотеку для BEMHTML-шаблонизации на стороне сервера
сделать что-то вроде project-stub для .NET проектов - заготову файловой структуры проекта и преднастроенную сборку БЭМ-бандлов.

Для серверной шаблонизации мы использовали библиотеку edgejs, с помощью которой внутри .NET процесса запускается node.js и для шаблонизации используется полноценный bem-xjst. Это круто, потому что на сервере можно использовать те же самые шаблоны, что и на клиенте. Для сборки бандлов мы использовали enb, а распространять всё это планировали с помощью менеджера пакетов NuGet.

Задачи на хакатон

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

Отладка шаблонов

Самой сложной оказалась часть с отладкой шаблонов - к сожалению, эту задачу решить не получилось. Мы попробовали использовать в качестве отладчика Visual Studio и Node Inspector. В Visual Studio получилось остановиться в нужном месте и даже видеть значения переменных, но при этом не показывался исходный код. При подключении через Node Inspector возникала странная, абсолютно не информативная ошибка. Несмотря на неудачу и скудную документацию про отладку в EDGE.js, мы не оставим этот вопрос и обязательно что-нибудь придумаем.

Тестирование производительности

Помимо отладки, мы попробовали померить производительность серверной шаблонизации. Интересно было сравнить шаблонизацию BEMHTML на .NET с JavaScript реализацией и с шаблонами на Razor. В качестве тестовых данных использовали объект с 3 уровнями вложенности: корневой объект → внутри 100 групп → внутри каждой группы 3 элемента (вот полный json). Тестовые шаблоны должны были вывести корневой элемент как div, группы как ul и элементы групп в тэге li. Вы можете посмотреть шаблоны для BEMHTML и шаблоны для Razor. Во время тестов шаблонизацию запускали 1000 раз подряд. Результаты:

самый быстрый - Razor (~380ms),
BEMHTML в 6 раз медленнее (~2300ms)
BEMHTML, запускаемый через .NET - еще в 1.5 раза медленнее (~3500ms)

В принципе, примерно этого мы и ожидали, но, в любом случае, нужно было убедиться. Хотя и оказалось, что BEMHTML в .NET медленнее остальных вариантов, в абсолютных числах результаты получились вполне приемлемые и, кажется, такое замедление шаблонизации - не очень большая плата за возможности, которые дает BEMHTML.

Демо-приложение

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

vcard

Результат можете посмотреть по адресу http://bemtest.ecm7.ru, исходный код - здесь. Пример демонстрирует основные моменты: серверную шаблонизацию, отправку данных формы на бэкенд, подключение bem-components.

Релиз

И, наконец, последняя по порядку, но не по важности задача - выпустить релизную версию пакета. За время хакатона мы сделали много мелких доработок, исправили несколько багов, переписали неудобные места и написали документацию (почитайте, вроде классно получилось). В результате мы опубликовали новую версию в NuGet и её уже можно попробовать!

Команда

В заключение скажу пару слов о нашей команде. Если честно, я не был уверен, что эта тема интересна кому-то, кроме меня (всё же задача, мягко говоря, необычная для Яндекса). Но, несмотря на это, у нас собралась отличная команда: Костя Гладких, Саша Потапенко и Рома Ширин. Костя занимался тестами производительности и отладкой шаблонов, Рома и Саша писали демо-приложение, а я помогал Косте с тестами и писал документацию. Ребята, я вам очень благодарен за то, что поддержали меня. Вы очень круты!

Что дальше?

Конечно же на этом мы останавливаться не собираемся. В ближайших планах:

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

Спасибо за внимание!

Всем привет. Решил что пора пустить БЭМ в свое сердце чуточку глубже. Давно пользуюсь неймингом для css, хотелось бы теперь и разметку делать при помощи БЭМ и возможно использовать bem-components (но это пока не главное).

В общем, закопался в доках, гитхабе и просмотрел кучу докладов, в итоге в голове каша. Надеюсь на ваш совет.

Суть - проекты собираются при помощи gulp. Html в них собирается используя gulp-file-include простейшими конструкциями вида:

@@include("../common/head.html", { "title": "Заголовок этой страницы" })

И на выходе несколько статичных страничек, немного отличающихся друг от друга. Ну как обычно в общем.

И все это меня вполне устраивает, я не хочу переходить пока полностью на бэм-стек, а начать с чего-то проще. Собственно, хотелось бы описывать шаблоны через bemjson, bemhtml (bem-xjst?). Чтобы на выходе получались статичные html страницы. Без привязки к js, без i-bem, просто статика html.

Но я не увидел примера как это можно было бы завести на галпе. Чтобы не надо было полностью переделывать всю сборку, а просто заменить таску по сборке html, оставив все остальное на местах. Пните в нужном направлении, пожалуйста.

Всем привет, объясните пожалуйста, как мне поможет БЭМ в случае если у меня есть блок например TopSales (показывает наиболее продаваемые продукты в интернет магазине) И у другого клиента, этот блок выглядит совсем по другому. Как мне использовать существующий блок? Там присутствуют теже сущности, имя, цена, итд, но расположение и логика совсем другие? Например у первого клиента 3 продукта в ряд, а у второго 4, у одного клиента на мобильном 2 продукта, а у другого (на 768пх - 3, 550 - 2 и меньше 55пх -1). Или другой пример мега меню. Вроди бы блок один. Но каждый клиент придумыает какие-то свои особенности, то хочет больше колонок, то хочет картинки товаров, третий хочет картинки с категорий, и каждый раз хотелось бы все переиспользовать, но по факту получается большую часть приходиться делать за ново, затрагивает ли этот аспект БЭМ?

Ребята, если вы чувствуете в себе силы помочь нам и дописать технологию enb-css, чтобы она научилась поддерживать произвольные плагины postCSS — приходите в https://github.com/enb/enb-css/issues/9!

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

@blond, сможешь описать API в issue?

Всем привет. Благодаря репозиторию @tadatuta наткнулся на интересный плагин к PostCSS - rebem-css. Изначально показался он показался менее удобным, чем написание по-старинке.

// по-старинке
.object-item
  &_status_bad
    .object-item__extended
      background: #000

// rebem-css
:block(object-item)
  &:mod(status bad)
    :block(object-item):elem(extended)
      background: #000

Проблема 1

Подсветка синтаксиса при таком написание режет глаза...

Проблема 2

Код становится ещё длиннее... Утешает только то, что можно применять bem-naming

Проблема 3

Писали, что такой синтаксис ближе к BEMHTML. Но как по мне, он не дотягивает немного.

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

POBEMS поддерживает как синтаксис rebem-css, так и свой.

Решение 1-й проблемы

Добавлена возможность написания через кавычки

:block('object-item')

Решение 2-й проблемы

Добавлен контекст блока при объявлениях элементов и модификаторов. Теперь можно писать так

:block('block')
  &:mod('mod val')

    :elem('elem1')
      background: #000

    :elem('elem2'):mod('mod val')
      width: 10px

      :elem('elem3')

.block_mod_val .block__elem1 
.block_mod_val .block__elem2_mod_val .block__elem3

Решение 3-й проблемы

Для объявления модификаторов добавил более привычный синтаксис через запятую :mod('mod', 'value')

:block('block')
  &:mod('mod' -> 'val')

    :elem('elem1')
      background: #000

    :elem('elem2'):mod('mod' -> 'val'):mod('mod2' -> 'val2')
      width: 10px

.block_mod_val .block__elem1 
.block_mod_val .block__elem2_mod_val.block__elem2_mod2_val2

Или в LESS стиле

:block('block') {
    &:mod('mod', 'val') {
        :elem('elem1') { }
        :elem('elem2'):mod('mod', 'val'):mod('mod2', 'val2') {}
    }
}

Что дальше...

Далее часть изменений отправлю в репозиторий rebem/css, а в pobems буду добавлять более "горячие" нововведения. Репозиторий POBEMS

Добрый вечер. Начал изучать бэм, решил попробовать bem-express для начала написания сайта. Но проблема в том, что изменения файлов через watch-run не отслеживаются. Я так понял, что там должен висеть процесс, а тут просто выполняется скрипт и всё - Process finished with exit code 0. Что я делаю не так? И ещё один вопрос. Как подключить файлы css и js к страницам? Бандл сформировался, но файлы сайт видит только из папки static, а туда ничего не попадает.

Доброе время суток, у вас исчезла с сайта документация на BH, осталась только на гитхабе, вы собираетесь отказываться от BH?

Возникла задача перенести часть компонент из "генерящихся на лету" в статику (в частности, чтобы наладить совместную разработку с коллегами, не использующими систему сброки).

Напр., в соответствии с описанным в посте про dist-поставки, отдельно подключать для bem-components components.dev.js+bemhtml.js и components.dev.css или минимизированные аналоги.

Насколько понимаю, просто отключать уровни в make.js не годится, надо как-то более поэлегантней подходить?

Использую enb и локальный сервер для разработки. При помощи enb make из gulp генерятся "боевые" шаблоны для Phalcon/php сервера.

Пришло время поговорить об успехах и продвижениях в работе над сборкой с помощью BEM SDK.

На вебинаре мы расскажем вам:

Про проблемные места в имеющихся инструментах сборки и удобство модульного подхода.
О целях организаций bem-sdk и gulp-bem на GitHub.
Про интроспекцию своими руками по файлам компонентов ваших проектов и библиотек с помощью библиотеки bem-walk.
О построении и использовании графа зависимостей и вычислении требуемых для сборки сущностей в различных технологиях (js, css, шаблоны) с помощью библиотеки bem-graph.
О построении списка итоговых файлов компонент по .deps.js-файлам компонент с помощью bem-deps и bem-walk.
Про сборку итоговых файлов для браузера из списка файлов компонент, полученных на предыдущем шаге, с помощью библиотек gulp-bem-*.

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

Трансляция начнется в 19:00 28 июля на отдельной странице. Ведущий вебинара — @zxqfox.

Товарисчи! Подскажите где посмотреть последний вебинар про шаблонизаторы.

Здравствуйте) Собственно сам вопрос в заголовке. Заметил, что собирается проект и с одним и с другим расширением. Для .bemhtml, соответственно, нет подсветки в phpstorm.

Хочется привести в нормальный вид старые .styl-файлы проекта (как минимум, сделать группировку свойств). csscomb, насколько я знаю, не поддерживает .styl. В качестве линтера можно использовать stylint, но цель - отформатировать автоматически. Может, кто-нибудь подскажет хорошее решение?

Привет) Появилось время обновить бэм инструменты (когда-то проект был сделан на основе project-stub). Однако, вроде, делаю все правильно, но сборка не идет Подскажите, пожалуйста, в чем может быть ошибка?

Вот что выдает консоль: ссылка Вот репозиторий: ссылка

Добрый день! Какие есть практики создания статичных, кэшируемых частей сайта, что бы генерировать только изменяемые части/подставлять данные? Или это не так уж и затратно каждый раз заново генерировать страницу?

Доброго времени суток.

В доме имеем картину что-то типо:

<ul class="block">
    <li class="block__item">Элемент 1</li>
    <li class="block__item block__item_mod">Элемент 2</li>
    <li class="block__item">Элемент 3</li>
</ul>

Как сделать проверку наличия модификатора 'mod' у любого из элементов 'item'? Подобные вещи this.hasMod('item', 'mod') или this.hasMod(this.elem('item'), 'mod') возвращают false, все другие обращения к элементам, возвращают ошибки. Пример такой проверки нигде не могу найти, поэтому если есть какое-то место с такими примерами, буду рад за ссылку, а пока, спрашиваю здесь.

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

Из документации я не понял:

1. Шаблонизация в браузере когда и зачем нужна? Я предполагаю, что весь HTML будет собираться на сервере, в том числе, что динамично будет отправляться клиенту. Но, коль есть возможность компилировать в браузере, хотелось бы узнать о плюсах и кейсах, когда это может понадобиться. Что, касательно ресурсов, насколько это ресурсозатратно?

2. Возможность частичной сборки и компиляции со статичными html файлами Многие элементы интерфейса - статичные, например, шапка, меню, футер, общие лейауты. Собирать их отдельно для каждого клиента - бессмысленно. Возможно ли как-то объединять уже собранный, статичный HTML и динамичные блоки?

3. Документация про сборку Я прочитал весь раздел про enb, но там скорее кейсы, чем сама архитектура. Мне непонятно, как организовать сборку для проекта в целом.

4. Как организовать сборку для дева, прода, лайв В продолжение предыдущего вопроса - для разработки и для прода требуются разные настройки. Я правильно понимаю, что разные настройки обеспечиваются разными файлами по типу make.js ?

5. Документация про декларацию Я не нашел цельной информации про декларацию (?.bemdecl.js), и всё, что я про это знаю - частички из статей про enb, из-за этого складывается ощущение, что я чего-то не догоняю.

_6. Почему и зачем есть BEMHTML и bh, какой для каких ситуаций лучше _ Я долго пытался понять - что делает bh, пока не понял, что это - еще один шаблонизатор, такой же, как BEMHTML. Так в чём же разница, и как так получилось, что есть два шаблонизатора? Какой из них под какие цели заточен? И, кстати, про bh нет документации.

_7. Где доки про BEMTREE, когда что лучше использовать _ Про BEMTREE лишь сказано, что синтаксис "Такой же, как в BEMHTML, но только с двумя режимами", при всём при том, что это - важный и основной инструмент при сборке. Очень хотелось бы увидеть примеры и объяснения, как делать шаблоны для BEMTREE.

8. Доки про SASS|LESS| любые модули Основной инструмент библиотеки для css - stylus, по историческим причинам. Хотелось бы узнать, как можно использовать другие препроцессоры. Я часто встречал мнение, что БЭМ - навязывает свой стек. Я понимаю, что это не так, просто инструменты дефолтные такие. Хотелось бы узнать, как можно в сборку включать те, что соответствуют моему стеку.

9. Контроллеры для сборки, практики BEM - штука хорошая, но кажется очень замкнутой в себе из-за того, что до конца не ясен сам процесс сборки и связь с внешним миром. Во всех статьях и гайдах говорится в-основном о статичных сайтах. И из-за этого, совсем мне не понятно, как сделать динамичный сайт, как организовать динамичную и частичную сборку, роутинг и т. д.

10. Шапка, лейаут в общем html Возможно, мой мозг еще не переключился в БЭМ-область, но мне до конца не ясно, как сделать общие части интерфейса для всех страниц сайта - каждый раз подключать header, content, footer?

11. Подключение скриптов, стилей, других библиотек. Если подключение своих скриптов, всё худо-бедно понять можно, то как подключить скрипты библиотек? Их ведь нужно указать в head (а некоторые скрипты в футере). Как же это всё делается в рамках шаблонов, страниц? Хардкодить?

12. Какие практики бандлов Из документации мне совсем не понятно что такое и для чего нужны бандлы. Как я понял - это собранные пакеты css и js, но куда их нужно пихать и зачем - непонятно.

13. Борщик Для чего борщик существует внутри enb, ведь в enb есть другие инструменты, для работы с файлами. В чем его отличие и назначение?

Возможно, многие вопросы очевидные или неправильно сформулированы, про неправильное пользование той или иной технологией. Каждый из этих вопросов - для меня важный, прошу, если вы знаете ответ или имеете мнение хоть по одному из них - не стесняйтесь.

Так как у нас сервер на ноде, возникает вопрос, насколько оправданно собирать bemtree бандлы с bem-xjst внутри. Кажется проще подключить их на старте приложения и досыпать шаблоны из собранных бандлов через compile. Что думаете?

Когда мы скрещивали БЭМ и .NET в прошлый раз, на выходе получили зачатки библиотеки для bemhtml-шаблонизации в приложениях ASP.NET MVC. За прошедший месяц библиотека выросла в NuGet пакет, содержащий всё необходимое для БЭМ-разработки на .NET.

Что изменилось

Библиотека переименовалась в System.Web.Bem, по аналогии с System.Web.Mvc
Вместо gulp для сборки теперь используется enb. Как я и писал в прошлый раз, gulp-плагины для БЭМ-сборки еще довольно "сырые". Кроме того, их код написан на ES6 (используются промисы, новый синтаксис и т.д.). Из-за этого при запуске gulp-сборки в Visual Studio есть особенности, из-за которых настройка сборки кажется очень сложной неподготовленному человеку. Решено было выпилить gulp и заменить его на enb, который хорошо протестирован и не требует поддержки ES6.
Появился механизм мэппинга http-запросов на БЭМ бандлы и его настройки вынесены в конфиг приложения (Web.config). Секция конфига должна называться bemSettings. C её помощью можно задать путь к папке с бандлами (по умолчанию ~/Bem/desktop.bundles) и используемый алгоритм выбора бандла для текущего запроса. Пример:
```
<bemSettings RootDir="~/Bem/public" Mapper="Single" />
```
Добавлены хелперы для view, с помощью которых можно внутри Razor-view отрендерить bemhtml шаблон. Например, на этой тестовой страничке начало и конец страницы отрендерены с помощью Razor (и там кодом на C# выводится текущее время), а блок с селекторами отрендерен с помощью bemhtml (в шаблоне это выглядит так).
Всё это дело оформлено в виде NuGet пакета и опубликовано. При установке пакета
- в проект из npm ставятся enb и нужные для сборки enb-технологии,
- добавляется папка Bem с файловой структурой БЭМ проекта и конфигом для enb,
- в конфиг MsBuild добавляется дополнительный этап сборки - запуск enb; таким образом при компиляции C# в Visual Studio выполняется также и сборка БЭМ-бандлов
- в проект подключается C# библиотека для серверной шаблонизации
В NuGet выложены библиотеки блоков bem-core и bem-components
Быстрый старт
Устанавливаем в свой проект ASP.NET MVC пакет System.Web.Bem. Это можно сделать через UI менеджера пакетов (не забываем отметить галочку "Include prerelease") или через консоль: nuget install System.Web.Bem -Prerelease.
Добавляем нужные блоки в папку Bem/desktop.blocks и добавляем их в декларацию Bem/desktop.bundles/default/default.bemdecl.js (по умолчанию в настройках указано собирать весь проект в один бандл с именем default).
В желаемом методе контроллера возвращаем экземпляр класса System.Web.Bem.BemhtmlResult и передаем ему в конструкторе bemjson (например, вот так)
Собираем проект в Visual Studio, запускаем, открываем нужный url и наслаждаемся видом наших блоков :)
Если очень хочется, можно подключить bem-components и использовать блоки оттуда. Подключение происходит аналогичным образом, только название пакета другое - bem-components. После установки пакета файлы блоков будут добавлены в папку Bem/libs. Нужно подключить папки с файлами как уровни переопределения в конфиг enb (должно получиться примерно так).
Что дальше

Как видите, часть пунктов из прошлого плана дальнейших действий выполнено. Но не все. По-прежнему планирую разобраться с отладкой серверных шаблонов и померять производительность. Также хочется написать хелперы для контроллеров, чтобы не писать каждый раз new BemhtmlResult(...).

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

Здравствуйте. Скажите почему apply для разных модов работает не единообразно?

({
   block:'block',
   tag:"tag",
   content:"content" 
})

block('block')(
    content()(function(){return apply('content') + '!'}),
    tag()(function(){return apply('tag') + '!'})
)

<undefined! class="block">content!</undefined!>

У нас на проекте для фронта используются bem-components, а серверной частью занимается Symfony и шаблонизатор Twig. Возникла совершенно не понятная проблема с инициализацией бэм скриптов, если шаблонизатором Twig создавать копии js файлов (или объединять) на стороне сервера, что-бы выдавать пользователю свежие скрипты.

Работает создание копий на деве и объединение всё в один файл на бою в твиге так:

{% javascripts
    '@jquery'
    'plugins/modernizr/modernizr.js'
    'plugins/bem-components/desktop/bem-components.js+bh.js'
    'js/common.js'
    output='js/compiled/app.js'
%}
    <script src="{{ asset_url }}"></script>
{% endjavascripts %}

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

<script src="/app_dev.php/js/compiled/app_part_1.js"></script>
<script src="/app_dev.php/js/compiled/app_modernizr_2.js"></script>
<script src="/app_dev.php/js/compiled/app_bem-components.js+bh_6.js"></script>
<script src="/app_dev.php/js/compiled/app_common_7.js"></script>

И вот здесь уже возникает не понятная проблема, все скрипты с идентичным исходным кодом, как в оригинале, просто загружаются из другой папки с другими названиями, но с вероятностью 50% БЭМ модули не отрабатываются и не инициализируются. Причем скрипты все загружаются, в правильном порядке, в консоли чисто, ни одной ошибки, просто модули не инициализируются. jQuery код нормально отрабатывает, а вот БЭМ просто молчит. Кто сталкивался с данной проблемой? А то мне уже надоело выслушивать сопли бэкендеров, что бэм такой сякой и дело не в твиге, а в бэме и т.д. и т.п., динозавры они короче говоря, привыкли по старинке ваять кучи непонятного jQuery кода и теперь всё остальное для них, это бред и их мнение истина)) Ну думаю некоторые поймут)

PS: если подключать обычным способом, то все нормально работает.

Привет! поделитесь пожалуйста ссылками на проекты где используется основная часть технологий bem (i-bem, bem-components, ...), желательно что бы это были следующие типы сайтов: порталы, интернет магазины, корпоративные сайты, целевые страницы.

Добрый день! Начинаю осваивать БЭМ методологию и пытаюсь понять архитектуру приложения. Мне сейчас непонятны некоторые вещи:

Если, в зависимости от пришедших данных, мне надо вывести два разных блока, то где мы эту логику определяем? Какая есть практика этих фронтовых контроллеров, или они не нужны вовсе?
Если внутри одного блока, у меня могут быть различные другие блоки, зависящие от логики, где мне эту логику определять?
Чем бандлы отличаются от БЭМ блоков в их широком представлении?

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

От создателей легендарного bemmet очередная штука, позволяющая писать меньше букв — bem-indent-syntax.

Demo вместо тысячи слов.

PS: Если наберется 10 звезд на github, сделаю плагин для Sublime ;)

Здравствуйте. В роликах Яндекса видел, что WebStorm неплохо дополняет БЭМ, может кто подлится рецептом настройки?

Есть безобразный модуль, который нельзя оставлять в покое в таком виде, помогите переделать его в БЭМ вид, а то копаю документацию, но никак не могу понять, как избавиться от jquery, всё же мозг пока не отвык от него. P.S. сейчас id объявлен через data-id="1", лишь что-бы хоть как-то реализовать работу.

Структура сейчас примерно такая:

<div class="side-panel i-bem" data-bem={"side-panel":{}}>
    <div class="side-panel__item" data-id="1">
        <div class="side-panel__action-btn">content</div>
    </div>
    <div class="side-panel__item" data-id="2">
        <div class="side-panel__action-btn">content</div>
    </div>
</div>

JS такой:

modules.define('side-panel', ['i-bem__dom', 'jquery'], function(provide, BEMDOM, $) {

provide(BEMDOM.decl(this.name,
    {
        onSetMod : {
            'js' : {
                'inited': function() {
                    var _this = this;

                    function getData() {
                        $.getJSON('json/eventsOnAir', function(data) {
                            var arrJson = data;

                            _this.elem('item').each(function() {
                                var idItem = $(this).data('id');

                                for (var i = 0; i < arrJson.length; i++){
                                    if (arrJson[i] == idItem){
                                        $(this).find('.side-panel__action-btn').addClass('side-panel__action-btn_show');
                                    } else {
                                        $(this).find('.side-panel__action-btn').removeClass('side-panel__action-btn_show');
                                    }
                                }
                            });
                        });
                    }
                    setInterval(getData, 3000);
                }
            }
        }
    }
));

});

Добрый день! В вёрстке в зависимости от задач периодически пишу логику, в которой необходим ajax.

Сейчас я эмулирую ajax-ответы от сервера у себя в js-файлах. А для программиста оставляю закомментированный кусок чернового ajax-запроса.
Программист получает от меня мой js-полотенчик
И изменяет часть кода (убирает эмуляцию и дописывает необходимые ему куски ajax-запроса) Проблема в том, что ему каждый раз, как он получает от меня верстку, приходится вручную проделывать вышеописанные танцы.

Подскажите, как можно обойти эту проблему и не тратить нелишнее время?

Всем привет!

Мы тут решили сделать логотип для BEM SDK.

Варианты обсуждаем в задаче https://github.com/bem-sdk/bem-sdk/issues/11.

Не проходите мимо :cat2: поделитесь мнением :smiley_cat:

У меня есть json файл, в который прилетают данные и формируют массив [id1, id2, id3] и так далее, мне необходимо следить за изменениями в этом массиве и при появлении в нем очередного значения, выполнять функцию. Как я предполагаю, для отслеживания необходим блок next-tick, но документация по нему очень маленькая и совсем не понятно, как с ним работать в данной ситуации. Можете помочь и направить?