БЭМ - Форум

Хочу поинтересоваться на примере конкретной задачи. При потере фокуса у блока убирается модификатор. Нужно его оставить, если внутренний элемент блока не пустой. В документации я не нашёл методов для проверки на пустоту, а нашёл только вот это:

В контексте экземпляра блока и элемента с DOM-представлением зарезервировано поле this.domElem, содержащее jQuery-объект со ссылками на все DOM-узлы, с которыми связан данный экземпляр.

Благодаря этой информации я додумался сделать так (привожу часть кода):

modules.define('input', ['i-bem-dom'], function (provide, bemDom) {

   provide(bemDom.declBlock(this.name, {
       beforeSetMod: {
           'focus': {
               '': function () {
                   return !(this.domElem.find('.input__item').val());
               }
           }
       }}));
});

Оно работает. Но почему-то у меня такое ощущение, что это можно сделать более элегантно, не хардкодить имя элемента.

Пробовал искать через findChildElem(elem);, но с результатом поиска у меня не получалось делать ничего, кроме манипуляций модификаторами. Как тогда наиболее правильно производить всё то множество операций, которое доступно в jQuery?

Добрый день. Имею такой код:

modules.define('input', ['i-bem-dom'], function (provide, bemDom) {

   provide(bemDom.declBlock(this.name, {
      onSetMod: {
         'js': {
            'inited': function () {
               this._domEvents().on('focusin', this._focusIn);
               this._domEvents().on('focusout', this._focusOut);
            }
         }
      },
      _focusIn: function () {
         this.setMod('focus');
      },
      _focusOut: function () {
         this.delMod('focus');
      }
   }, {
      lazyInit: true,
      onInit: function () {
         this._domEvents().on('focusin', this.prototype._focusIn());
      }
   }));
});

Выдаёт ошибку:

Uncaught TypeError: Cannot read property 'focus' of undefined
    at l.setMod (jquery.js:9816)
    at l._focusIn (aside.js:89)
    at Function.onInit (aside.js:105)
    at Function._processInit (jquery.js:9816)
    at Function._processInit (jquery.js:9816)
    at h (jquery.js:9816)
    at d (jquery.js:9816)
    at HTMLLabelElement.<anonymous> (jquery.js:9816)
    at Function.each (jquery.js:365)
    at jQuery.fn.init.each (jquery.js:137)

Порядок подключения у меня такой: Сначала подключается jQuery 2.2.4 (проверял с версией 3, такая же ошибка) Далее bem-core.js из библиотеки bem-core-dist Далее вышеприведённый скрипт. Всё подключается в шапке без оборачивания в document.ready и тому подобное.

Пример вёрстки:

<input class="input i-bem" data-bem="{"input": {} }">

Такие кавычки в data-bem генерятся автоматически, т.к. пишу на паге, в инспекторе выглядит ок. Если убрать весь второй объект с lazyInit, то всё работает нормально. Что я делаю не так?

Подскажите, пожалуйста, как правильно сверстать такие блоки:

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

https://jsfiddle.net/b19chkdf/

Я сделала для для каждого блока block модификатор - block_dir_row и block_dir_column. Проблема в том, что у некоторых элементов (.block__title) должны быть разные внешние отступы, в приложенном фидле - 2 и 20 пикселей. Согласно методологии, внешняя геометрия задается через родительский блок. Но родительский-то блок у них один и тот же. Я пока сделала так: задала им те же модификаторы, что и родителям, и через них сделала отступы (см. фидл). Правильно ли это?

Привет! Кто может подсказать как настроить csscomb для стилей написанных по БЭМу:

block(chat) {
    position: relative;

    elem(head) {
        display: flex;
    }
}

Кажется, находил плагин postcss-csscomb, но он мне не сильно помог. В идеале какое-то решение для ST3, чтобы Ctrl+Shift+C и все работало.

Или нужно просто правильно настроить CSSComb?

Блок не должен влиять на соседние блоки. Поэтому свойство float недопустимо. А как насчет свосйтва margin? Если я сделаю margin у элемента достаточно большим, то соседний элемент перенесется под него.

Здравствуйте, скажите пожалуйста. Часто на проектах необходимо реализовать вывод каких-нибудь айтемов, будь то:

Новинки
Горячие товары
Просмотренные товары
И т.д Для такой реализации я создал блок-родитель:

<div class="cellRow hotProduct__cellRow">
    <div class="cellRow__content">
    <div class="cellRow__title">Горячие товары</div>
    <div class="cellRow__inner">

  //Блоки с айтемами

    </div>
    </div>
</div>

Для позиционирования этого блока в месте для вывода "горячих товаров" я создал ему микс из классов "hotProduct" и класса блока "cellRow" - то есть в данном случае я буду позиционировать блок с помощью класса "hotProduct__cellRow".

Наделе же в моей разметке нет родительского блока hotProduct, в моем случае это лишний div который по сути ни за что не отвечает.
Первый вопрос - на сколько правильно так делать? Или же нужно обвернуть мой блок "cellRow" в блок "hotProduct"?
Сам по себе блок cellRow подразумевается, как универсальный, то есть и какой-то характерный внешний вид ему задавать не получится - Допустим в этом месте сайта у этого блока должен быть фон и бордер - их я тоже задам через микс - hotProduct__cellRow.
Второй вопрос - будет ли это правильно? Или для этого лучше подойдет модификатор?

Еще один непонятный для меня момент, он касается непосредственно самих айтемов, которые будут лежать внутри блока "cellRow", их я тоже делаю блоками, а не элементами, допустим вот так:

<div class="cellItem">
       <div class="cellItem__title"><a href="#" class="link cellItem__link">Заголовок Айтема</a></div>
       <a href="#" class="link cellItem__link"><img class="cellItem__img" src="..."></a>
       <div class="cellItem__price">222222</div>
 </div>

Эти блоки будут выводится, допустим опять же, в разных местах, местах того же блока-обвертки "cellRow", допустим в блоке "hotProductcellRow"(Отступление: далее двойные подчеркивания между блоками вырезаются и текст выделяется жирным) айтемы "cellItem" будут выводится по шесть штук в ряд, в блоке "cellRow" но уже с миксом "newProductcellRow" они должны выводится по 4 в ряд и иметь фон.
Третий вопрос - можно ли задать микс блоку "cellItem" не по имени родителя cellRow(потому что по сути это ничего не даст) а по имени деда, то есть "hotProductcellItem" в месте с "горячими" товарами, "newProductcellItem" в месте с новыми товарами, хочется так сделать но предполагаю что это не правильно и лучше для этого воспользоваться модификаторами? Вот код полностью:

<body class="page">
<div class="cellRow hotProduct__cellRow">
    <div class="cellRow__content">
    <div class="cellRow__title">Заголовок</div>
    <div class="cellRow__inner">

        <div class="cellItem hotProduct__cellItem">
            <div class="cellItem__title"><a href="#" class="link cellItem__link">Заголовок Айтема</a></div>
            <a href="#" class="link cellItem__link"><img class="cellItem__img" src="..."></a>
            <div class="cellItem__price">Заголовок Айтема</div>
        </div>

        <div class="cellItem hotProduct__cellItem">
            <div class="cellItem__title"><a href="#" class="link cellItem__link">Заголовок Айтема</a></div>
            <a href="#" class="link cellItem__link"><img class="cellItem__img" src="..."></a>
            <div class="cellItem__price">Заголовок Айтема</div>
        </div>

        <div class="cellItem hotProduct__cellItem">
            <div class="cellItem__title"><a href="#" class="link cellItem__link">Заголовок Айтема</a></div>
            <a href="#" class="link cellItem__link"><img class="cellItem__img" src="..."></a>
            <div class="cellItem__price">Заголовок Айтема</div>
        </div>

        <div class="cellItem hotProduct__cellItem">
            <div class="cellItem__title"><a href="#" class="link cellItem__link">Заголовок Айтема</a></div>
            <a href="#" class="link cellItem__link"><img class="cellItem__img" src="..."></a>
            <div class="cellItem__price">Заголовок Айтема</div>
        </div>
    </div>

    </div>
</div>

Здравствуйте! Учусь верстать по БЭМ. С HTML и CSS я разобрался. Дошел до написания JS. И возник вопрос. Нужно ли писать какие-то специальные классы для Javascript селекторов? И если да, то зачем они? И как они должны выглядеть? Просто к уже существующим классам добавляется префикс "js"? Например, js-block__element?

Коротко и только о самом главном.

Библиотеки

bem-core

Выпустили версии bem-core 4.1.0-4.2.1.

Все изменения, вошедшие в релизы, описаны в CHANGELOG.

bem-core: turbo

Выпилили jQuery из bem-core. Официального релиза пока не было, но релиз-кандидат уже можно пробовать и писать нам отзывы.

bem-components

Выпустили версии 4.0.0-6.0.1.

Все изменения, вошедшие в релизы, описаны в CHANGELOG.

bem-history

Выпустили версию 4.0.0.

Подробно описали изменения в CHANGELOG.

bem-calendar

Опубликовали мини-библиотеку bem-calendar на основе bem-components.

bem-textarea-editor

Опубликовали библиотеку bem-textarea-editor с блоком editor, позволяющим писать текст в формате Markdown с удобной панелью инструментов (примерно как на Github) и получать превью до отправки поста на сервер.

Посмотреть на работу блока в действии можно тут.

bem-font-awesome

Опубликовали библиотеку bem-font-awesome, которая позволяет использовать Font Awesome с БЭМ-нотацией и не тянуть лишние стили в проект.

bem-font-awesome-icons

Опубликовали альтернативный вариант библиотеки bem-font-awesome — bem-font-awesome-icons, где разделили шрифт на отдельные SVG-иконки, так что теперь на клиент приезжает только то, что действительно используется.

БЭМ и React

bem-react-core

Выпустили версию 1.0.0. До официального релиза библиотеку отделяет только подготовка документации.

Много и в разных форматах рассказывали о bem-react-core:

Провели серию мастер-классов. Видео опубликовали на YouTube в канале bem.info.
Сергей Бережной рассказал на Я.Субботнике по фронтенду, что делать, если вы используете i-bem.js и хотите получить преимущества React-подхода без потери привычных БЭМ-терминов и декларативности. И как нужно поступать, если вы используете React и хотите получить преимущества БЭМ-методологии.
Антон Виноградов показал предварительный релиз bem-react-core на митапе по БЭМ в декабре.

bem-react-components

Активно работали над bem-react-components — библиотекой блоков для разработки с React по БЭМ-методологии. Официального релиза пока не выпустили, но большинство блоков уже реализованы.

create-bem-react-app

Продолжаем создавать реактовый проджект стаб create-bem-react-app, который позволяет одной командой собрать готовое React/БЭМ-приложение с установленными зависимостями и правильной файловой структурой.

Технологии

bem-express

Выпустили партию мажорных обновлений:

Обновили версии библиотек bem-core 4.2.1 и bem-components 6.0.1.
Перешли со Stylus к PostCSS. Теперь из коробки поставляется тот же набор плагинов, что и в bem-components.
Внедрили опциональный livereload. Подробнее смотри в документации и в README проекта.
Добились ускорения сборки.
Отказались от bower для поставки библиотек. Теперь все зависимости ставятся через npm в папку node_modules.

Написали большое и подробное пошаговое руководство: Переходим на сторону сервера с bem-express.

project-stub

Обновили версии библиотек bem-core 4.2.1, bem-components 6.0.1 и другие зависимости.

В качестве эксперимента включили gulp-bem в project-stub.

bem-xjst

Выпустили версии v8.3.1-v8.8.5.

Все изменения, вошедшие в релизы, описаны в CHANGELOG.

Инструменты

bem-sdk

Перенесли все пакеты bem-sdk в монорепозиторий. В процессе избавились от циклических зависимостей между модулями и разделили все для оптимального использования на клиенте.

Выпустили обновленные пакеты bem-sdk. Обновили документацию.

Написали пакеты @bem/sdk.file и @bem/sdk.naming.file.stringify, которые позволяют взять описание БЭМ-сущности, путь до уровня, передать схему файловой структуры и получить путь до файла.

bem-tools

Выпустили bem-tools 2.0.0, где обновили bem-tools-create 2.1.0.

Подробности читайте в документации.

ENB

Выпустили мажорную prestable-версию enb@2.0.0-0. Внедрили модули из bem-sdk в ENB.

enb-bem-techs

Полностью переписали enb-bem-techs на bem-sdk и выпустили prestable-версию 3.0.0-0.

enb-bemxjst

Обновили enb-bemxjst до актуальной версии bem-xjst, где появилась поддержка экспортов в разные модульные системы.

gather-reverse-deps

Выпустили пакет gather-reverse-deps, который позволяет собирать обратные зависимости.

gulp-bem-src

Выпустили версию 0.1.0 с обновлением bem-sdk.

bem-naming

Пакет bem-naming перенесли в монорепозиторий bem-sdk. Новое название пакета — @bem/sdk.naming.entity.

Кроме того, теперь можно использовать отдельные пакеты:

@bem/sdk.naming.entity.stringify — формирует строку в соответствии с представлением объекта БЭМ-сущности.
@bem/sdk.naming.entity.parse — получает БЭМ-сущность из строки.
@bem/sdk.naming.cell.stringify — формирует путь строкового объекта к сущности внутри файловой системы БЭМ-проекта.
@bem/sdk.naming.presets — набор известных соглашений об именовании БЭМ-сущностей.

borschik

Выпустили версии 1.7.0-2.0.0, где прекратили поддержку node 0.8.0. и заменили uglify-js на uglify-es для поддержки ES6.

Подробности в CHANGELOG.

bem-walk

Написали полный и понятный README.

bemhint

Выпустили версии 0.10.0-0.10.1, где появилась поддержка предупреждений. Обновление сохраняет полную обратную совместимость с предыдущей версией.

bemhint-estree

Выпустили линтер недостающих зависимостей bemhint-estree, где добавили поддержку ES6 и написали обертку-раннер для линтера bem-xjst. В каждом репозитории есть подробная документация.

bemhint-deps-schema

Выпустили новую версию плагина для bemhint — bemhint-deps-schema 2.1.0, который проверяет, чтобы файлы *.deps.js соответствовали спецификации. Теперь bemhint-deps-schema умеет обрабатывать не только .json-, но и .js-файлы с module.exports.

Документация

Написали большое и полезное руководство по всему БЭМ-стеку: Переходим на сторону сервера с bem-express.
Опубликовали новый документ про то, как описывать зависимости в БЭМ.
Написали спецификацию для DEPS в БЭМ.
Добавили новые документы в разделе Методология:
Переработали FAQ: обновили старые вопросы и добавили новые.
Обновили документы в методологической части сайта.
Обновили раздел с обучающими материалами: добавили подборки с видео и ссылки на БЭМ-проекты и разделили информацию на две группы:
- Проекты — пошаговые инструкции для получения конечного результата.
- Темы — подробные руководства по отдельным технологиям или инструментам.
Систематически пополняем список статей про БЭМ от внешних источников.

Сайт bem.info

Выкатили раздел БЭМ-библиотек в новом дизайне:
Обновили форум.

Мероприятия

2017-12-28 14 13 30

Конференции

FullStack Conference. Владимир Гриненко и Сергей Бережной выступили с докладом BEM — The unknown.
HolyJSconf в Питере. Владимир Гриненко рассказал о зависимостях в компонентном вебе — Зависимости в компонентном вебе, сделанные правильно.
United Dev Conf в Минске. Владимир Гриненко выступил с докладом Dependencies in component web done right. Слайды к докладу в keynote.
Я.Субботник по фронтенду. Сергей Бережной рассказал, как совместить преимущества БЭМ и React.
React Moscow Meetup #2. Сергей Бережной рассказал, что нового в bem-react-core.
DevCon School: Технологии будущего. Дмитрий Андриянов и Антон Виноградов выступили с докладом «Разрабатываем ASP.NET MVC приложение с БЭМ-фронтендом».
Web Development Conference. Владимир Гриненко выступил с докладом Dependencies in component web done right.

Митапы по БЭМ

Провели целую серию BEMup'ов:

BEMup для новичков — встреча для тех, кто уже имеет представление о базовых понятиях методологии. Опубликовали скринкаст. Видео с первого BEMup'а для новичков, для тех, кто пропустил начало.
Рассказали про сборку БЭМ-проектов с enb и про все новости БЭМ из мира React на BEMup'е в Москве. Опубликовали видео.
Провели BEMup в Екатеринбурге для разработчиков, использующих БЭМ в своих проектах и желающих больше узнать про БЭМ-технологии.
Провели мастер-класс, на котором написали проект на основе project-stub. На живых примерах показали, для чего нужны технологии BEMJSON, BEMTREE, BEMHTML, DEPS, и как использовать их вместе. Опубликовали скринкаст.
Сергей Бережной провел мастер-классы по использованию библиотеки bem-react-core. Скринкасты с нескольких встреч опубликовали на Youtube. Также вы можете найти видео на форуме bem.info по тегу BEMup + video.
Провели еще один BEMup для новичков в Москве, где Владимир Гриненко рассказал про методологию БЭМ и технологии с нуля, Антон Виноградов представил первый релиз-кандидат библиотеки bem-react-core, и состоялась секция вопросов и ответов с Сергеем Бережным, Виталием Харисовым и Владимиром Гриненко.

Хакатоны

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

Вебинары

Антон Виноградов провел вебинар Немного БЭМ в вашем React, где рассказал, как начать использовать bem-react-core — декларативно описывать React-компоненты, гибко их доопределять и использовать уровни переопределения.

Разное

Рассказали на форуме об опыте внедрения gulp-bem.
Антон Виноградов ответил на вопросы про bem-xjst и React.
Занялись портированием Animate.CSS на БЭМ. Инструкция по подключению.
Возродили канал bem.info на Youtube. Теперь все новые видео с докладами и вебинарами вы сможете находить тут. Подписывайтесь!

Привет! Для публикации bemdesign нам нужна помощь с production сборкой. Нужно собирать .html .css .js со всех бандлов обработать/заменить пути ссылок.

Будем благодарны за PR https://github.com/bemdesign/bem-design

Вот у меня есть блок с карточкой товара. Назовоем его item. И есть другой блок - catalog - в нем расположены карточки item. Нужно дать карточке margin 10px, чтобы карточки не были впритык. Блоку давать нельзя, потому что он не должен влиять на свое окружение. Я сделал микс блока item и элемента catalog--item. И дал margin элементу catalog--item. Скажите, нормально ли то, что я дал имя элементу блока catalog такое же (catalog--item), как у самостоятельного блока item? Я новичок в вашей методологии, поэтому такой вопрос. Вот, что получилось...

<div class="item catalog--item"></div>

P.S. здесь я использовал -- вместо подчеркиваний, потому что подчеркивания не пишутся

В документации по бэм написано, что не следует применять к блокам внешнюю геометрию (отступы, границы) и позиционирование, а как же тогда позиционировать и отталкивать блоки относительно друг друга, и располагать согласно макету?? Я новичок, буду благодарен за помощь!!!

Здравствуйте. Подскажите пожалуйста, я использую сетку для верстки, которую можно скомпилировать на одном из четырех перпроцессоров: less || scss || sass || styl, которая в дальнейшем импортируется в файл со стилями, одного из выбранных препроцессоров и из него дергаются примеси из этой библиотеке с сеткой, Например: grid.styl(кусок библиотеки с сеткой)

$offset = 30px
$offset_one_side = ($offset / 2)

row-flex()
    display flex
    flex-wrap wrap
    margin-left ($offset_one_side * -1)
    margin-right ($offset_one_side * -1)

В файле со стилями, на том же stylus

.menu
       $__page
             row-flex()

На выходе style.css

.menu__page{
    display: flex
    flex-wrap: wrap
    margin-left: -15px
    margin-right: -15px
}

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

Второй вопрос: На ранних видео по БЭМу видно что использовался stylus, можно было писать стили на его синтаксисе. Сейчас его заменил postCss, но это же по сути своей не препроцессор? Можно ли его как-то расширить что бы он понимал синтаксис одного из четырех перпроцессоров(less || scss || sass || styl)? Или же как-то добавить отдельно, что бы работали полезные модули postCss. С резюмирую: Есть необходимость писать стили на синтаксисе препроцессоров (желательно stylus) и пользоваться плюшками сторонних библиотек.

А в выпадающем меню при наведении 2 селектора: .link:hover .link-inner {display: block;} Придется нарушить принципы БЭМ? Либо через JS делать. А как лучше?

Согласно методологии блок должен быть написан так, чтобы его можно было переместить в любое место на странице или вообще на другую страницу. То есть, он не должен влиять на свое окружение. А что касается элементов? Должна ли быть возможность свободного перемещения элемента ВНУТРИ БЛОКА без риска потери каких-то его качеств (внешнего вида, например - верстка элемента может "поехать")?

Здравствуйте. Подскажите пожалуйста, как можно подружить bemmet с phpStorm. Sublime удалось настроить без особых проблем, но я привык к phpStorm, хотелось бы пользоваться им. Я поставил плагин с webStorm'a, в настройках указал пути к папке с node, а дальше необходимо указать путь к самому bemmet, он лежит в node_modules(если я все правильно понял), но какой файл нужно указать там?

Возможно я вообще не туда погнал? Буду благодарен за разъяснения=)

Здравствуйте! Я читал вашу документацию. И возник вопрос. Существуют приватные (служебные) блоки. Которые помогают написать какой-то другой сложный блок. Как мне определить, что блок - приватный? И что сам по себе он смысла особо не несет? Допустим есть такая разметка:

<div class="article">
  <div class="img"></div>
  <div class="description"></div>
</div>

Это УПРОЩЕННЫЙ пример. Представим, что img и description лучше сделать блоками, а не элементами (внутри них тоже есть элементы, например). Тут же не понятно, что img и description - приватные блоки, используемые для написания блока article. А одно из особенностей БЭМ - самодокументируемый код и понятные наименования. В данном примере этого нет. Как мне быть?

Здравствуйте! Я изучаю БЭМ. Хочу взять от него CSS и HTML (то есть, только методологию наименований). Есть ли средства, которые могут проанализировать мою верстку и стили и показать, насколько она соотвествует БЭМ? Я вот сверстаю макет. А как понять - правильно ли (с точки зрения БЭМ) я его сверстал (написал HTML и CSS. Без раскладывания элементов по папкам). Может, я как-то не так понял эту методолгию. Но если нет возможности проверить работу на правильность, как я об этом узнаю?

Пробую сабж, после установки при попытке запуска отваливается в node_modules/@bem/sdk.config/index.js на extendConfigsPathByLayer -- что config.levels ожидается в виде массива (config.levels.forEach), тогда как на самом деле там хэш:

{ 'src/components': { scheme: 'nested', default: true } }

Переделал levels в .bemrc` в массив:

    "levels": [
        {
            "path": "src/components",
            "scheme": "nested",
            "default": true
        }
    ],

Но далее лезет ещё более странное:

Error: Cannot find module 'babel-preset-es2015'
    at Function.Module._resolveFilename (module.js:469:15)
    at Function.resolve (internal/module.js:27:19)
    at Object.<anonymous> (.../node_modules/bem-react-scripts/config/webpack.config.dev.js:152:25)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (.../node_modules/bem-react-scripts/scripts/start.js:31:16)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)

М.б., стоит вытащить релиз из ветки v0.4.*? Похоже, что нынешнее v1.0.0-rc* -- вообще не стабильное?

Или где-то что-то не так сделал? (Хотя вроде только поставил по инструкции и начал пробыЮ всего-то...)

А что там по поводу bem-react-stub -- оно живое, кто-то пробовал? Меня смутило, что последний коммит -- аж год назад.

Хелп, что ли?

UPD: (При просмотре сообщения на форуме выскакивает странный квотинг для markdown-code.)

Необходимость прописывать deps.js для технологии tmpl-spec.js это потенциал делать PR enb-bem-tmpl-specs или это оптимальное поведение?

Добавил в проект тестирование шаблонов bemhtml https://github.com/CultOfOpenSource/bem-bootstrap/commit/912b8ba392dfe383d1dd843b9d0038c47cf7a899 смотрел эту доку https://ru.bem.info/toolbox/enb/enb-bem-tmpl-specs/

Отчет о покрытии создается по скомпилированному файлу components.tmpl-specs//.bemhtml.js понять реальное покрытие по отчету не возможно.

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

Бандлы для сборки имеют одинаковое содержание независимо от платформы:

project/
├── …
├── bundles/
│   ├── desktop.bundles/
│   │   ├── about/
│   │   │   └── about.bemdecl.js
│   │   └── …
│   └── touch.bundles/
│       ├── about/
│       │   └── about.bemdecl.js
│       └── …
└── …

Т. е. /bundles/desktop.bundles/about/about.bemdecl.js === /bundles/touch.bundles/about/about.bemdecl.js. Каждый раз при добавлении нового бандла его приходится дублировать во все уровни сборки, что кажется избыточным. Хотелось бы сократить структуру до:

project/
├── …
├── bundles/
│   ├── about/
│   │   └── about.bemdecl.js
│   ├── contacts/
│   │   └── contacts.bemdecl.js
│   └── …
└── …

И в процессе сборки уже получать:

project/
├── …
├── bundles/
│   ├── about
│   │   ├── about.bemdecl.js
│   │   ├── about.desktop.bemhtml.js
│   │   ├── about.phone.bemhtml.js
│   │   ├── about.touch.bemhtml.js
│   │   ├── about.desktop.bemtree.js
│   │   ├── about.phone.bemtree.js
│   │   └── about.touch.bemtree.js
│   └── …
└── …

Думал в сторону enb/techs/symlink, но он тоже возвращает Error: Concurrent techs for target: about.desktop.bemdecl.js, techs: "symlink" vs "symlink"; А нужно, видимо, что-то похожее на механизм {lang}, только {platform}.

UPD Опубликовали видео доклада про bem-react-core: https://youtu.be/2pKg-xGg1gI?t=38

Ты должен прийти, если:

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

В программе:

доклад от @tadatuta
секция вопросов/ответов с @veged, @tadatuta и @vithar
рассказ о bem-react-core от @awinogradov

Регистрация уже открыта: https://events.yandex.ru/events/bemup/15-december-2017/

Stay BEMed!

Итоги работы нашей команды за четыре месяца:

Новости библиотек
Новости технологий
Новости инструментов
Новости БЭМ из мира React
Новости документации
Новости сайта bem.info
Новости мероприятий и сообщества

Новости библиотек

bem-core

Выпустили минорную версию v4.2.1.

Исправлено:

Ошибка с инвалидацией кеша элементов при изменении DOM.
Ошибка в i-bem-dom__events, приводившая к тому, что данные события не передавались в обработчик.
Метод isEditable модуля dom. Добавлены недостающие типы.

Изменения, вошедшие в релиз:

Синтаксические изменения в JSDoc блока i-bem-dom.
Незначительная доработка документации.
Добавление CLA(Contributor License Agreement).

Подробности в CHANGELOG.

bem-core: get rid of jQuery!

Выпилили jQuery из bem-core. Официального релиза пока не было, но релиз-кандидат уже можно пробовать и писать нам отзывы!

bem-components

Выпустили минорную версию v6.0.1, в которой обновили bem-core до версии 4.2.1 и устранили ряд ошибок:

Поддержка bem-xjst 8.x: режим js() заменен на addJs().
В блоке popup у молификатора target_anchor исправлены вычисления позиции для поддержки новой версии jQuery.
Исправлена ошибка, при которой не удалялись контролы в select_mode_radio-check.

Изменения, вошедшие в релиз:

Добавлен CLA(Contributor License Agreement).
Удалены неиспользуемые шаблоны в блоке attach.

Подробности в CHANGELOG.

Новости технологий

bem-xjst

Выпустили релизы:

Основные изменения:

Добавили поддержку source map.
Исправлен экспорт библиотек, в первую очередь для CommonJS.
Возобновили поддержку вложенных миксов.
Исправлены ошибки в методе generate().
Добавили возможность задавать функцию для кастомизации вывода ошибок.
Обновили зависимости от vow и uglify-js.

Подробности читайте в CHANGELOG.

bem-express

Обновили версии библиотек bem-core 4.2.1 и bem-components 6.0.1.

bemhint

Выпустили новую версию bemhint 0.10.0, где появилась поддержка предупреждений. Обновление сохраняет полную обратную совместимость с предыдущей версией и уже опробовано на нескольких реальных проектах.

bemhint-estree

Выпустили линтер недостающих депсов bemhint-estree, где добавили поддержку ES6 и написали обертку-раннер для линтера bem-xjst. В каждом репозитории есть подробная документация.

bemhint-deps-schema

Выпустили новую версию плагина для bemhint — bemhint-deps-schema 2.1.0, который проверяет, чтобы файлы *.deps.js соответствовали спецификации. Теперь bemhint-deps-schema умеет обрабатывать не только .json-, но и .js-файлы с module.exports.

enb-bemxjst

Обновлили enb-bemxjst до актуальной версии bem-xjst, где появилась поддержка экспортов в разные модульные системы (раньше эту задачу брала на себя технология для ENB).

Новости инструментов

bem-sdk

Проделали большую работу по переносу bem-sdk в монорепозиторий.

В процессе избавились от циклических зависимостей между модулями и распилили все для оптимального использования на клиенте. Однако закончить миграцию не успели.

На хакатоне продолжили работу по миграции тестов модулей bem-sdk с ava на mocha, что позволило считать покрытие в монорепозитории. Доделать поддержку сетов не успели, но, кажется, придумали, как сделать правильно и сохранить обратную совместимость.

Помимо этого починили баги и обновили документацию.

Алексей Ярошевич написал еще пару пакетов @bem/sdk.file и @bem/sdk.naming.file.stringify — теперь можно взять описание БЭМ-сущности, путь до уровня, передать вашу схему файловой структуры и получить путь до файла.

Все пакеты зарелизили, так что теперь можно пробовать мигрировать (впрочем, можно было и раньше ;)

ENB

Продолжаем внедрять модули из bem-sdk в ENB. В ближайшее время ожидается canary-версия, которую можно будет пробовать у себя в проекте. Подглядывать (или помогать) можно здесь.

borschik

Выпустили мажорную версию borschik v2.0.0, где заменили uglify-js на uglify-es для поддержки ES6.

Новости БЭМ из мира React

bem-react-core

Продолжаем активно развивать библиотеку bem-react-core в beta-режиме. Выпустили несколько минорных версий v0.4.3-v0.4.6.

Основная документация:

Провели ряд мероприятий, посвященных bem-react-core:

Провели серию мастер-классов по bem-react-core. Видео можно найти на YouTube в канале bem.info.
Сергей Бережной рассказл на Я.Субботнике по фронтенду, что делать, если вы используете i-bem.js и хотите получить преимущества React-подхода без потери привычных БЭМ-терминов и декларативности. Как нужно поступать, если вы используете React и хотите получить преимущества БЭМ-методологии. Видео доклада.

bem-react-components

Продолжаем активно развивать bem-react-components — библиотеку блоков для разработки с React по БЭМ-методологии.

create-bem-react-app

Продолжаем создавать реактовый проджект стаб create-bem-react-app, который позволяет одной командой собрать готовое React/БЭМ-приложение с установленными зависимостями и правильной файловой структурой.

Новости документации

Как и обещали, написали много нового и пересмотрели часть старой документации:

Большой и полезный туториал по всему БЭМ-стеку: Переходим на сторону сервера с bem-express от Сергея Бочарова уже опубликован в нашем разделе обучающих материалов.
Новые документы в разделе Методология:
Переработанные и обновенные документы:

Новости сайта bem.info

Обновили форум.

Новости мероприятий и сообщества

Организовали несколько встреч БЭМ-сообщества — BEMup'ов, на которых Сергей Бережной провел мастер-классы по использованию библиотеки bem-react-core. Скринкасты со всех встреч можно найти на Youtube или по тегу BEMup + video на форуме bem.info.
Владимир Гриненко и Сергей Бережной выступили на FullStack Conference с докладом BEM — The unknown.
Владимир Гриненко рассказал о зависимостях в компонентном вебе на HolyJSconf в Питере. Доклад Зависимости в компонентном вебе, сделанные правильно.
Сергей Бережной рассказл на Я.Субботнике по фронтенду, как совместить преимущества БЭМ и React. Видео доклада
Провели двухдневный продуктивный хакатон по инструментам БЭМ. Все результаты уже описаны в этом выпуске. Следите за новостями, если хотите поучавствовать в следующем!

Адепты bem-components, подскажите, пожалуйста: в попап select'а поместил ещё input (для поиска по элементам menu). Что нужно переопределить, чтобы весь функционал сохранился, кроме закрытия попапа по клику на этот input? P.S. Нутром чую, что дело в _onDocPointerPress и _isEventInPopup.

https://github.com/bem/bem-components/blob/v6.0.0/common.blocks/select/select.js#L247-L268

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

Делаю примерно так:

var lazyBlock = this.findChildBlock(SomeLazyBlock);
this._events(lazyBlock).on('someEvent', this.onSomeEvent);

Но во время findChildBlock оно уже автоматически инициализируется, так?

Существует ли способ сохранить неинициализированное состояние и при этом реагировать на события?

Последняя версия project-stub ругается при сборке mergred если брать за основу https://github.com/bem/project-stub/tree/merged те это решение не совместимо с текущей версией project-stub.

Подскажите как сделать сборку

Хочу на bem/project-stub настроить sass (либа зависимостей использует его и надо задействовать стили, миксины и функции) при этом оставить возможность использовать postcss.

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

enb/enb-sass - не актульный
теоретически можно задействовать awinogradov/enb-postcss (он используется в project-stub) надо добавить плагины jonathantneal/precss, но это не сработало.

Позже сделаю еще один поход и опишу подробности.

Поделись свои опытом использования enb + sass или bem-stack + sass.