Всем привет!

Кратко об основных изменениях и новостях в мире БЭМ за прошедшие 3 месяца с предыдущего дайджеста.

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

У нас появились два новых и крутых документа по БЭМ:

• Быстрый старт для начинающих знакомиться с БЭМ — он по-настоящему простой, без bem-tools и BEMJSON.
• Мы внезапно написали документ про CSS. Хотя «БЭМ не только про CSS» ©.

Кроме этого, многие другие документы исправлены и дописаны.

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

• Закончили работу над стабильной версией bem-core 4.0.0. Основные изменения:

  • Изменился API блока i-bem
  • Изменился API блока querystring.
  • Из модуля identify удален опциональный параметр onlyGet.
  • Из модуля events удалены все статические методы.
  • В классе Event модуля events удалено поле result.
  • Элемент css блока page больше не поддерживает автоматическое добавление условных комментариев для IE.

  Все подробности можно прочитать в миграционном гайде. А еще лучше — посмотреть выступление @veged: https://events.yandex.ru/lib/talks/3685/ где он подробно рассказывает обо всех изменениях.

• Заканчиваем работу над новой весрией bem-components — уже на этой неделе планируется релиз v4 с новым дизайном, обязательно расскажем об этом релизе отдельно.
• Начали работу над bem-react-core. Это новая библиотека, которая позволит писать react-совместимые блоки в bem-терминах.
• Параллельно с этим работаем над bem-react-components, библиотека будет содержать react-реализацию блоков из bem-components. На данный момент готовы блоки Button, Icon, Link, TextInput, TextArea, Checkbox.

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

• Выпустили два мажорных, десятки минорных и патчевых релизов bem-xjst. Самая свежая весия — 8.3.0. Основные изменения:

  • Теперь режимы mix(), js(), attrs() заменяют значения BEMJSON.
  • Если выхотите расширить значение BEMJSON используйте applyNext().
  • Вызовы applyNext() во всех режимах по умолчанию возвращают BEMJSON.
  • Если вы захотите добавить mix, js или attrs теперь можно использовать addMix(), addJs() или addAttrs().

  Важно! bem-xjst 8.x пока несовместима с bem-components. Прямо сейчас мы работаем над этим.

• Кроме bem-xjst 8.0.0 у нас появилась куча новых фич:

  • runtime lint
  • mod()/elemMod() теперь можно использовать без второго аргумента, чтобы сделать подпредикат модификатора с любым значением
  • новые appendContent() и prependContent()
  • функции эскейпинга оптимизированны и работают быстрее, а главное не тормозят если работают в холостую
  • новая опция production с помощью которой страница будет рендерится даже если случились ошибки в отдельных блоках

  Подробнее обо всех изменениях читайте в release-notes.

• Мы взяли в официальную поддержку заготовку проекта на БЭМ-платформе с серверной частью на express: https://github.com/bem/bem-express.

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

• Выпустили ENB 1.4.0, release-notes.
• Работали над плагинами для enb:
  • enb-bemxjst 8.0.0
  • enb-bem-specs 0.10.0
  • enb-stylus 2.4.0
  • enb-css 1.2.2
• Мы продолжаем строить инструмент bem-lib-site для автоматической сборки документации для библиотеки блоков/проекта на БЭМ.
• Кроме этого, идет большая работа в BEM-SDK.

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

• Провели очередной хакатон по БЭМ, продвинулись по:
  • bem-config: доведен до готовности и ума модуль для работы с конфигурациями БЭМ-проектов.
  • bem-tools: создан готовый к использованию плагин bem-tools-create, чтобы его использовать нужно так же установить bem-tools-core.
  • плагины для bem-tools-create к различным IDE: для Atom, IDEA, и Sublime были собраны рабочие прототипы плагинов для запуска команды bem-tools-create.
  • модульной сборке c gulp: взяли gulp-bem-bundle-builder и попытались внедрить в реальные проекты, запустилось, поняли чего не хватает, работаем дальше.
  • по модулям BEM-SDK: доведены до рабочего состояния модули bem-deps, bem-graph для чтения и работы с зависимостями между БЭМ-сущностями, bem-decl для работы с файлами деклараций БЭМ-сущностей, bem-bundle, и другие.
• Возобновили традицию BEMup'ов — 30 сентября очередной БЭМап для всех желающих прошел в Московском офисе Яндекса
• Вместе с @zxqfox провели два вебинара про сборку проектов на gulp, если кто-то пропустил — смотрите в записи: сборка проекта с помощью BEM-SDK сборка проекта с помощью gulp.

Почему не создаются блоки командой $ bem create -l desktop.blocks/ -b block? Пишет-bash: bem: command not found

Нашел сетку bem-grid https://www.npmjs.com/package/bem-grid и руководство по ее установке https://ru.bem.info/forum/959/ на project-stub. Но как я пониманию эта сетка предназначена только для ENB, а есть ли версия для gulp? Т.к. я в project-stub использую gulp. Спасибо!

Доброго дня! Встал вопрос обернуть часть текста в отдельный тег strong, примерно как тут:

<h2 class="promo-title">
<strong class="bem">БЭМ</strong> 
предлагает 
<em class="promo-highlight">единые</em> 
правила написания кода
</h2>

Как описать такую конструкцию в bemjson?

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

Сразу скажу, что очень плохо знаю чистый js, но на данный момент уже записался на курс по js в хорошую школу (не буду рекламировать название), но обучение не так быстро, а БЭМ уже хочется использовать, но пока без js.

1. Как использовать JQuery? Т.к. добавляя в js файл блока команды из jquery они не работают, хотя саму библиотеку на странице подключаю, и в *.bundles эти скрипты подключаются в конец файла index.min.js, но исполняться почему-то не хотят.
2. Как подключать и использовать другие библиотеки (например: magnific-popup, bxslider, font-awesome и д.р.)? Тоже не понятно, т.к. на страницу подключаю, и они там отображаются, но также как и с jquery работать не хотят.
3. Как делать адаптивные сайты в данной технологии, точнее как реализовывать структуру? Как я понял, идет разделение на платформы, и т.е. каждый медиа запрос разбивать в зависимости от устройства? Например:

desctop.blocks/
    menu/
        menu.css    //Тут прописываю стили для компьютера

tablet.blocks/
    menu/
        menu.css    //@media only screen and (max-width : 992px) и далее стили для планшета

phone.blocks/
    menu/
        menu.css    //@media only screen and (max-width : 480px) и далее стили для телефона

Правильно ли так делать? И если нет, то поправьте пожалуйста.

1. Как собрать весь проект воедино в отдельную папку, например dist? Чтобы были разные страницы (index.html, contacts.html), и один общий файл стилей, и общий файл скриптов. Т.е. всё как в простом проекте. Это для того, чтобы сверстанный проект можно было отдать back-end разработчику, который про bem ничего не знает, и хочет получить проект в таком виде.

Друзья, кто компетентен в этом помогите пожалуйста! Если есть возможность объяснить это всё по skype, то это будет вообще идеально. Я понимаю, что знания стоят денег, поэтому в случае компетентной помощи это вообще не вопрос) Спасибо!

Новичок, столкнулся с полным непониманием, вероятно плохо прочитал соответствующую документацию.

Преамбула: имеем header, в нём форму поиска с полем и кнопкой.

Соответственно: .header //block .header-search //block .header-search_input //element .header-search_submit //element

Для .header-search задаем основные параметры:

• width, height
• display
• padding
• font может еще что-то опционально

Для инпута и сабмита задаем подобные параметры.

А теперь два главных животрепещущих вопроса: 1) Где указываются отступы, бордеры, цвета надписей и прочие оформительские штуки для .header-search, инпута и сабмита? Из того, что я понял из документации, самый простой вариант: вешаем на .header-search какой-нибудь класс-модификатор, навроде ...--default, и в нем описываем все внешние данные, аналогично для инпутов.

В итоге имеем: .header-search_input--default //modificator .header-search_submit--default //modificator

<header class="header">

    <form class="header-search header-search--default">

        <input type="search" class="header-search_input header-search_input--default">

        <input type="submit" class="header-search_submit header-search_submit--default">

    </form>

</header>

Именно так это работает, или я что-то не понимаю?

2) Если мой вариант из вопроса 1 верен, то и изменения в контексте media-query для формы и инпутов указываются для соответствующих модификаторов:

    @media (max-width: 768px){
        .header-search--default{
            width: 100%;
        }

        .header-search_input--default{
            border: 1px solid green
        }

        .header-search_submit--default{
            font-size: 1.3em;
        }
    };

Так это работает, или я и в этом случае всё неправильно понял? :)

При первом клике на кнопку, и если input пустой, то вызывается popuv рядом с input с текстом о том, что он не заполнен, но при повторной клике, popuv уже не вызывается и идут ошибки, такого рода: Uncaught TypeError: Cannot read property 'setAnchor' of null

js код:

modules.define(
    'auth',
    ['i-bem__dom', 'jquery', 'location', 'querystring'],
    function(provide, BEMDOM, $, location, qs) {

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

                        this._input = this.findBlocksInside('input');

                        this.bindTo('submit', function(e) {
                            e.preventDefault();
                            _this._onSendAuth(e);
                        });
                    }
                }
            },

            _onSendAuth: function(e) {
                if (!/^([A-z0-9]{3,25})$/i.test(this._input[0].getVal())) {
                    this._dropdown = this._input[0].findBlockInside('popup');
                    this._dropdown.setAnchor(this._input[0]);
                    this._dropdown.toggleMod('visible', true);
                }
            }
        }));
    }
);

html:

<form class="auth i-bem" action="/login/auth" method="POST" data-bem="{&quot;auth&quot;:{&quot;csrf&quot;:&quot;&quot;}}">
    <div class="page-unit__login">
        <span class="input input_theme_islands input_size_m input_width_available i-bem" data-bem='{"input":{}}'><span class="input__box"><input class="input__control" placeholder="Логин"/></span>
            <div class="popup popup_target_anchor popup_autoclosable popup_theme_islands i-bem" aria-hidden="true" data-bem="{&quot;popup&quot;:{&quot;directions&quot;:[&quot;right-center&quot;]}}">Заполните поле</div>
        </span>
    </div>
    <div class="page-unit__login">
        <span class="input input_theme_islands input_size_m input_width_available i-bem" data-bem='{"input":{}}'><span class="input__box"><input class="input__control" type="password" placeholder="Пароль"/></span>
            <div class="popup popup_target_anchor popup_autoclosable popup_theme_islands i-bem" aria-hidden="true" data-bem="{&quot;popup&quot;:{&quot;directions&quot;:[&quot;right-center&quot;]}}">Заполните поле</div>
        </span>
    </div>
    <button class="button button_theme_islands button_size_m button_block_full button_type_submit button_view_action button__control i-bem" role="button" type="submit" data-bem="{&quot;button&quot;:{}}"><span class="button__text">Войти</span></button>
</form>

Добрый вечер, столкнулся с такой проблемой, при нажатии на кнопку button, выводит подобного рода ошибку "Uncaught TypeError: this._abortRequest is not a function", хотя сама функция _abortRequest есть

Сам код:

modules.define(
    'add-schedule',
    ['i-bem__dom', 'location', 'jquery'],
    function(provide, BEMDOM, location, $) {

    provide(BEMDOM.decl(this.name, {
        onSetMod: {
            js: {
                inited: function () {
                    this.button = this.findBlockInside('button');
                    this.button.bindTo('pointerclick', this._onClick);
                }
            }
        },

        _onClick: function(e) {
            this._abortRequest();

            this
                .setMod('disabled')
                .setText('Пожалуйста подождите...');

            this._xhr = $.ajax({
                type: 'GET',
                dataType: 'html',
                url: '/schedule',
                cache: false,
                context: this
            }).done(function (html) {
                this._onSend(html);
            });
        },

        _abortRequest: function () {
            this._xhr && this._xhr.abort();
        },

        _onSend: function(e) {
            if(this.hasMod('disabled')) {
                console.log(true)
            }
        }
    }));
});

HTML

<span class="p-title__button add-schedule i-bem" data-bem="{&quot;add-schedule&quot;:{}}">
                            <button href="/add" class="button button_theme_islands button_size_m button_view_action button_type_link button__control i-bem" role="button" type="button" data-bem='{"button":{}}'><span class="button__text">Добавить расписание</span></button>
                        </span>

В firefox анимация срабатывает только в таком виде, если на голом jquery $('html,body').animate({scrollTop: 485}, 2000);

т.е. надо еще дополнительно получить html, в терминах бэм я легко получаю блок page

page = this.findBlockOutside('page');
 page.domElem.animate({
                       scrollTop: topOffset,
                       },{
// ...

и в хроме, сафари у меня сролл работает, но не в ff. Как мне без подкллючения плагинов дополинтельных добраться до тэга html, чтобы на него анимацию тоже повесить?

BEMHTML.apply() всегда возвращает пустую строку. Что-то тут не так.

var BEMHTML;

(function(global) {
    function buildBemXjst(__bem_xjst_libs__) {
        var exports = {};

        exports.apply = function () { return ""; };

        return exports;
    };



    var defineAsGlobal = true;

    // Provide with CommonJS
    if (typeof module === 'object' && typeof module.exports === 'object') {
        exports['BEMHTML'] = buildBemXjst({

}
);
        defineAsGlobal = false;
    }

    // Provide to YModules
    if (typeof modules === 'object') {
        modules.define(
            'BEMHTML',
            [],
            function(
                provide

                ) {
                    provide(buildBemXjst({

}
));
                }
            );

        defineAsGlobal = false;
    }

    // Provide to global scope
    if (defineAsGlobal) {
        BEMHTML = buildBemXjst({

}
);
        global['BEMHTML'] = BEMHTML;
    }
})(typeof window !== "undefined" ? window : global || this);

Я для этого пользуюсь Коделобстером: http://www.codelobster.com

Привет, дорогой друг. Я хочу поделиться историей развития сборки в БЭМ.

Если ты из тех, кто совсем не любит читать большие тексты, то знай «Собирать проекты на БЭМ проще, чем скушать пирожок».

Заинтригован? Приходи на BEMup.

А теперь суровые подробности.

Первый кусочек пирога

В первом подходе мы решили проверить, возможно ли собрать самый простой БЭМ проект на чём-то, кроме ENB.

Под роль самого простого проекта лучше всего подходит project-stub: один бандл, минимум зависимостей, минимум кода.

В качестве чего-то, кроме ENB, мы выбрали Gulp. Как минимум это один из самых популярных инструментов для сборки с богатой «экосистемой» плагинов. Кроме того, Gulp не является готовым инструментом в отличии от большинства конкуретнов, это фреймворк для написания своих систем сборок. Такие его особенности дают определённую гибкость.

Так появился пакет gulp-bem. Что он умеет делать? Правильно, собирать project-stub и ничего больше.

Мы тогда даже не ленились и написали постик об этом.

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

Второй кусочек пирога и бутылка рома

Во втором подходе мы решили, что важно проверить ещё одну гипотезу. Состоит она из двух частей:

1. Можно ли собирать реальный проект? Посложнее, чем project-stub.
2. Можно ли собирать примеры, тесты и документаци?

Стандартные двухдневные посиделки привели нас к ряду идей.

Идея атомарного модуля для получения исходников

Модуль: gulp-bem-src.

Почти как gulp.src(), только bem.src().

Ну вы же знаете, что слово БЭМ делает любой модуль как минимум в 2 раза лучше, а тут даже в 3 раза получилось.

Идея о создании бандлов из чего угодно

Модули: gulp-bem-bundler-fs, gulp-bem-bundler-examples.

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

Идея об универсальной сборке бандлов

Модуль: gulp-bem-bundle-builder.

Один раз придумали, как собирать ваш CSS и собирайте его так хоть для документации, хоть для вашей бабушки.

Хелперы

Заодно появились хелперы для сборки шаблонов: gulp-bem-xjst, gulp-bh.

В этот раз постик мы не написали. Но пирожок всё равно заслужили, правда-правда!

Пирожок SDK

Между делом появился замечательный BEM SDK — набор атомарных модулей. Каждый модуль решает одну задачу.

В третьем подходе мы делали всё, чтобы наш малыш (BEM SDK) совсем повзрослел. И кажется, ещё совсем чуть-чуть и он отправится в мир похоти и разврата (ENB в живых сервисах).

Вот только некоторые крепыши: bem-naming, bem-walk, bem-decl, bem-graph, bem-deps, bem-bundle.

Пока пирожок не заветрил

Чтобы всё произошло, осталось не так уж и много:

1. Начать использовать BEM SDK в сервисах.
2. Дописать недостающие хелперы для i18n, borschik, и т.д.
3. Написать генераторы бандлов для тестов, примеров и документации.

1-2 октября мы соберёмся, чтобы совершить ещё один подход к снаряду под номером четыре.

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

Возобновляем традицию BEMup'ов — встреч для тех, кто использует БЭМ и смежные технологии в своих проектах.

Очередной BEMup пройдет в пятницу 30 сентября в московском офисе Яндекса c 19:00 до 22:00. В теплой и дружеской атмосфере команда БЭМ поделится планами и идеями на ближайшее будущее.

Предварительная программа:

• новости из мира БЭМ — последние релизы, планы и идеи (включая пару премьер);
• подробный рассказ про модульную сборку на gulp;
• рассказы участников сообщества о решениях, библиотеках и инструментах, которые могут облегчить жизнь разработчика и работу в предметной области БЭМ;
• ответы на животрепещущие вопросы и общение с командой.

Если у вас есть непреодолимое желание выступить на BEMup со своим докладом — пишите нам на info@bem.info.

Форма регистрации: https://events.yandex.ru/events/bemup/30-september-2016/. Присоединяйтесь!

Всем привет!

29 сентября в 19:00 Алексей @zxqfox Ярошевич проведет вебинар про сборку проектов с помощью gulp.

На вебинаре вы научитесь собирать с помощью gulp и модулей любые БЭМ-проекты: как простые статичные HTML-странички для верстки по макету, так и сложные сервисы на node.js, генерирующие BEMJSON в рантайме.

Запись трансляции 19:00 29 сентября доступна по ссылке: https://youtu.be/l1G425VcUUg

Всем привет, как можно решить проблему конфликта версий я так понимаю vow модуля.

после того как генерю проект через generator-bem-stub получаю вот что во первых нет ym в стандартной сборке как будто - жалуется сразу, потом когда хочу использовать схему var p = vow.defer(); говорит что не так надо делать)

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

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

p.s может быть я чего не понимаю, поделитесь опытом как сгенерить нормальный проект, т.к беру project-stub а там нет технологий node и тд, когда добавляю сам сборка не всегда удачна )

Добрый вечер!

Хочу собирать html на node.js сервере, используя следующий код:

var BEMHTML = require('./bundle/bundle.bemhtml.js').BEMHTML; var html = BEMHTML.apply(dataObject);

Где dataObject приходит такой: https://gist.github.com/philipusis/e98ea5bd6086d108e01adbc162cf26b9 Проблема в том, что для блока 'header' не применяется мой пользовательский шаблон, хотя в bundle.bemhtml.js он попадает: https://gist.github.com/philipusis/ef74ee8e1f63fb3300c83e5d6dfe58e0

HTML блока page генерируется нормально, т.е. библиотечные шаблоны работают нормально, а для header генерируется дефолтный

, который он берет из bemjson'а в dataObject. Полный код файла, который осуществляет сборку: https://github.com/philipusis/sixth-bem/blob/static_resources/render.js Допускаю, что где-то мог накосячить с конфигом для сборки, поэтому его можно посмотреть здесь: https://github.com/philipusis/sixth-bem/blob/static_resources/.enb/make.js

Подскажите, пожалуйста, что я забыл прописать?

Спасибо!

Только начинаем внедрять, есть вопрос, почему зависимости из BEMJSON создаются автоматически, а в шаблоне -- нет. Есть какая-то идеологическая причина? Или это ограничение сборщика enb текущей версии?

Подключаю bem-core.js установив через bower как описано в этом посте https://ru.bem.info/forum/469/, в консоле пишет: Uncaught ReferenceError: modules is not defined

Если подключить dev версию то ошибка на 426 строке: modules.define('cookie', function(provide) {

Используется Selenium Server, при попытке тестирования на другом браузере, кроме Chrome, возникает ошибка. Например, вызов

browsers: { firefox: { desiredCapabilities: { browserName: 'firefox' } } }

дает следующее: GeminiError: Cannot launch browser firefox: [init({"browserName":"firefox"})] The environment you requested was unavailable

Хотя браузер поддерживается в Gemini - https://github.com/gemini-testing/gemini/blob/master/test/browser/util.js . В чем дело?

Часто можно слышать, что в БЭМ длинные имена классов и это ОЧЕНЬ плохо. Решил проверить, что будет, если все имена классов сделать одно-/двухбуквенными.

Сделал минимизированную версию упрощённой мобильной выдачи поиска Яндекса, над которой работаю сейчас.

Итоговый код можно посмотреть на Я.Диске:

• search.orig.html — исходный HTML
• search.mini.html — все классы заменены на одно/двухбуквенные классы
• search.hack.html — все классы заменены на атрибуты: было <div class="l x">, стало <div l x>; в css соответственно .l и .x заменены на [l] и [x]

Без гзипа всё красиво:

30125  search.orig.html
26105  search.mini.html
24731  search.hack.html

gzip (стандартные настройки), бессердечная сука, разницу сильно нивелирует:

 8530  search.orig.html.gzip.gz
 8258  search.mini.html.gzip.gz
 8244  search.hack.html.gzip.gz

Разница между оригиналом и валидным минимизированным вариантом — 3.2%. Между оригиналом и невалидным «хакерским» вариантом — 3.3%.

zopfli (стандартные настройки) нивелирует ещё сильнее:

 8136  search.orig.html.zopfli.gz
 7909  search.mini.html.zopfli.gz
 7921  search.hack.html.zopfli.gz

Разница между оригиналом и валидным минимизированным вариантом — 2.7%. Между оригиналом и невалидным «хакерским» вариантом — 2.65%. Валидный вариант жмётся лучше «хакерского».

Итог: учитывая, что по сети информация передаётся пакетами (стандартный размер пакета TCP — 1500 байт), все эти файлы укладываются в 6 пакетов и в такой минимизации нет никакого смысла. Разве что хочется максимально запутать код.

Появилась необходимость собирать не только основной файл js но и подключать к нему web worker. Как Реализовать такой функционал в пределах БЭМ проекта?

Доброго времени суток, при использовании bem-core появилась необходимость изменить стандартного блока page, не хотелось бы делать его дубликат, хотелось именно изменить/заменить.

хотелось бы узнать как правильно это делать

Привет. Наверное, стоит отдельно попиарить, что теперь в bem-xjst есть опция runtimeLint. С помощью неё вы сможете получать предупреждения о нежелательных или опасных местах в ваших шаблонах и входных данных (BEMJSON-е). Включить опцию можно начиная с версии 7.2.0 вот так. Предупреждения можно будет поймать в STDERR.

Вот краткое описание какого рода проверки выполняются уже сейчас.

Булевы атрибуты

Актуально для тех, чей проект раньше использовал шаблонизатор версии ниже чем v4.x. Пример BEMJSON-а: { tag: 'input', attrs: { disabled: true } } Результат с v4.3.2: <input disabled=“true”/> Результат с v4.3.3: <input disabled/>

Подробнее об изменениях в описании к релизу: https://github.com/bem/bem-xjst/releases/tag/v4.3.3

elemMods вместе с block вместо mods

В 5.0.0 был исправлен баг который приводил к неверному трактованию полей mods и elemMods. Подробности есть в описании релиза. Сейчас если вы попытаетесь передать в BEMJSON что-то типа { block: 'b', elemMods: { … } }, то получите warning.

Изменения this.ctx.mods через шаблоны

Такие фокусы будут награждены предупреждением, потому что хороший шаблон не должен иметь сайдэффектов, и не должен изменять входной узел BEMJSON-а. Чтобы изменить модификаторы вы должны использовать this.mods.

Атрибуты class или data-bem созданные через BEMJSON-поле attrs или шаблон режима attrs()

Для генерации HTML-класса используйте режим cls(). Для генерации параметров для клиентского JS используйте режим js(). Иначе будет вываливаться предупреждение.

Проверки нейминга

Имена блоков, элементов, модификаторов, а так же значения модификаторов не должны содержать разделителей имени элемента (обычно это __) и разделителей модификаторов (_).

Миксы модификаторов к таким же модификаторам

Всевозможная акробатика вида { block: 'b', mix: [ { mods: { type: 'test' } }, { mods: { type: 'shmest' } } ] }, будет награждена предупреждением.

---

Если у вас есть идеи какие проверки можно добавить еще — пишите мне. Спасибо.

Продолжение следует.