Не нашёл никакого освещения проблемы. Иногда (часто) хочется иметь доступ к свойствам иконки через css. Наиболее оптимальный способ — использование <use> (с инлайном общего SVG-спрайта в body или обращение к самому файлу через xlink:href). Т. к. при сборке страницы мы получаем .deps.js, нельзя ли использовать это для получения списка иконок, которые «соберутся» в один спрайт? Есть ли подобная технология для enb?

Что-то не могу сделать такую простую вещь, как забиндиться на onChange (а он есть?) radio-group из bem-components и получить значение?

Суть следующая: при изменении значения в группе радиокнопок b1__options нужно проверять значение, и если оно, например, равно 3, то делаем setMod(disabled) элементу b1__elem.

Собственно, застрял на этапе получения значения getVal().

Вот это никак не реагирует:

this._events(this._radioGroup).on('change', this._radioChange);
this._events(this._radioGroup).on('click', this._radioClick);
this._domEvents(this._radioGroup).on('change', this._radioChangeDom);

Отсюда пара вопросов:

1. Есть ли change?
2. Почему не происходит BEM-событие?

А при DOM-событии клика вылетает ошибка (Uncaught TypeError: this._radioGroup.getValue is not a function):

this._domEvents(this._radioGroup).on('click', this._radioClickDom);

Глянуть можно тут: https://github.com/rteamx/project-stub/commit/eed20a6634a587c127d8ae8f39f56cac882123dd

Ребята, помогите собрать JS-блока.

Цель: 1) Получить реализацию блока в технологии JS 2) Получить минимум знаний по JS в методологии БЭМ, для дальнейшего +/-самообучения

Исходные данные:

• Блок sitemap, элемент button__icon_close
• Блок button с миксом menu__button, блок расположен вне блока sitemap
• Знание JS - ноль.
• Знание ООП - поверхностное на уровне новичек, язык с#
• Структура файлов:

BEMJSON:

{
    block: 'sitemap',
    js : true,
    content: [
            {
                block: 'button',
                mix : { block : 'sitemap', elem : 'button' },
                attrs : { title : 'Закрыть меню' },
                icon: {
                    elem: 'icon',
                    tag: 'span',
                    elemMods: {close: true}
                }
            } 
    ]
},
{
    block: 'button',
    mix: {block: 'menu', elem: 'button', theme: 'menu'},
    url: '#',
    title: 'Открыть меню сайта',
    content: 'Меню',
    tabIndex: 2
}

Поиск решения:

Первое что попробовал - вывести лог при клике.

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

    provide(BEMDOM.decl(this.name, {
        onSetMod : {
            js : {
                inited : function () {
                    this.bindTo('click', function () {
                        console.log('click');
                    })
                }
            }
        }
    }));
});

Консоль браузера сразу заругалась:

jQuery.Deferred exception: i.decl is not a function TypeError: i.decl is not a function
    at Object.<anonymous> (http://localhost:63342/osipbove-bem-project/desktop.bundles/index/index.min.js:35:58)
    at http://localhost:63342/osipbove-bem-project/desktop.bundles/index/index.min.js:1:1662
    at c (http://localhost:63342/osipbove-bem-project/desktop.bundles/index/index.min.js:1:1009)
    at R (http://localhost:63342/osipbove-bem-project/desktop.bundles/index/index.min.js:1:1792)
    at http://localhost:63342/osipbove-bem-project/desktop.bundles/index/index.min.js:1:1641
    at HTMLDocument.<anonymous> (http://localhost:63342/osipbove-bem-project/desktop.bundles/index/index.min.js:2:8353)
    at j (https://yastatic.net/jquery/3.1.0/jquery.min.js:2:29568)
    at k (https://yastatic.net/jquery/3.1.0/jquery.min.js:2:29882) undefined
r.Deferred.exceptionHook @ jquery.min.js:2
k @ jquery.min.js:2
jquery.min.js:2 Uncaught TypeError: i.decl is not a function
    at Object.<anonymous> (index.min.js:35)
    at index.min.js:1
    at c (index.min.js:1)
    at R (index.min.js:1)
    at index.min.js:1
    at HTMLDocument.<anonymous> (index.min.js:2)
    at j (jquery.min.js:2)
    at k (jquery.min.js:2)

в шапке модуля меняю i-bem-dom на i-bem__dom, консоль без ошибок, как и без ожидаемого console.log

Пока в ступоре, и вопросов немного: 1) В чем может быть ошибка, этого простого кода? 2) Как подписаться на событие click блока button, который вне блока sitemap?

Существует элемент 'icon' блока 'button' с модификатором 'close'

common.blocks/button/__icon/_close/button__icon_close.styl --- технология CSS

в index.bemjson.js блок выглядит таким образом:

{
    block : 'button',
    mix : { block : 'sitemap', elem : 'button' },
    attrs : { title : 'Закрыть меню' },
    icon : {
        elem : 'icon',
        elemMods : { close : true }
    }
}

Стили модификатора не собираются. Как и стили элемента button__icon. Замена 'icon' на 'content' - не помогает.

Особенность данной проблемы: на одном компе всё собирается, на домашнем - нет. На домашнем вчера обновлял модули связанные с БЭМ-методологией. Что именно обновлял - не помню. Переустановка с полной чисткой проекта - не помогла.

Народ, если ошибки нет - помогите разобраться в чем проблема. Может уже кто-нибудь сталкивался?

Пытаюсь подружить enb-bem-i18n с project-stub на express + bem-core и не получается.

Вот мой make.js:

var techs = {
        // essential
        fileProvider: require('enb/techs/file-provider'),
        fileMerge: require('enb/techs/file-merge'),

        // optimization
        borschik: require('enb-borschik/techs/borschik'),

        // css
        postcss: require('enb-postcss/techs/enb-postcss'),
        postcssPlugins: [
            require('postcss-import')(),
            require('postcss-each'),
            require('postcss-for'),
            require('postcss-simple-vars')(),
            require('postcss-calc')(),
            require('postcss-nested'),
            require('rebem-css'),
            require('postcss-url')({ url: 'inline' }),
            require('autoprefixer')(),
            require('postcss-reporter')()
        ],

        // js
        browserJs: require('enb-js/techs/browser-js'),

        // bemtree
        bemtree: require('enb-bemxjst/techs/bemtree'),

        // bemhtml
        bemhtml: require('enb-bemxjst/techs/bemhtml'),

        // i18n
        i18n: require('enb-bem-i18n/techs/i18n'),
        keysets: require('enb-bem-i18n/techs/keysets')
    },
    enbBemTechs = require('enb-bem-techs'),
    levels = require('./levels');

module.exports = function(config) {
    var isProd = process.env.YENV === 'production';

    config.setLanguages(['en', 'ru']);

    config.nodes('desktop.bundles/*', function(nodeConfig) {
        nodeConfig.addTechs([
            // essential
            [enbBemTechs.levels, { levels: levels }],
            [techs.fileProvider, { target: '?.bemjson.js' }],
            [enbBemTechs.bemjsonToBemdecl],
            [enbBemTechs.deps],
            [enbBemTechs.files],

            // i18n
            [techs.keysets, {
                lang: '{lang}'
            }],
            [techs.i18n, {
                lang: '{lang}',
                exports: { globals: 'force' }
            }],

            // css
            [techs.postcss, {
                target: '?.css',
                oneOfSourceSuffixes: ['post.css', 'css'],
                plugins: techs.postcssPlugins
            }],

            // bemtree
            [techs.bemtree, { sourceSuffixes: ['bemtree', 'bemtree.js'] }],

            // bemhtml
            [techs.bemhtml, {
                sourceSuffixes: ['bemhtml', 'bemhtml.js'],
                forceBaseTemplates: true,
                engineOptions: { elemJsInstances: true },
                requires: {
                    i18n: { globals: 'BEM.I18N' }
                }
            }],

            // i18n merge
            [techs.fileMerge, {
                target: '?.{lang}.bemhtml.js',
                lang: '{lang}',
                sources: ['?.bemhtml.js', '?.lang.{lang}.js']
            }],

            // client bemhtml
            [enbBemTechs.depsByTechToBemdecl, {
                target: '?.bemhtml.bemdecl.js',
                sourceTech: 'js',
                destTech: 'bemhtml'
            }],
            [enbBemTechs.deps, {
                target: '?.bemhtml.deps.js',
                bemdeclFile: '?.bemhtml.bemdecl.js'
            }],
            [enbBemTechs.files, {
                depsFile: '?.bemhtml.deps.js',
                filesTarget: '?.bemhtml.files',
                dirsTarget: '?.bemhtml.dirs'
            }],
            [techs.bemhtml, {
                target: '?.browser.bemhtml.js',
                filesTarget: '?.bemhtml.files',
                sourceSuffixes: ['bemhtml', 'bemhtml.js'],
                engineOptions: { elemJsInstances: true }
            }],

            // js
            [techs.browserJs, { includeYM: true }],
            [techs.fileMerge, {
                target: '?.js',
                sources: ['?.browser.js', '?.browser.bemhtml.js']
            }],

            // borschik
            [techs.borschik, { source: '?.js', target: '?.min.js', minify: isProd }],
            [techs.borschik, { source: '?.css', target: '?.min.css', minify: isProd }]
        ]);

        nodeConfig.addTargets([
            '?.bemtree.js',
            '?.min.css',
            '?.min.js',
            '?.lang.{lang}.js',
            '?.{lang}.bemhtml.js'
        ]);
    });
};

Все собирается успешно, но в момент старта приложения получаю ошибку:

/Users/anakatata/Desktop/test/desktop.bundles/index/index.ru.bemhtml.js:3401
            i18n: global['BEM']['I18N'],
                               ^

TypeError: Cannot read property 'I18N' of undefined

В чем может быть проблема?

Недавно в библиотеке bem-react-core появилась документация, а на WSD в Москве я сделал быстрый обзорный доклад (начало в 4h30m36s):

https://youtu.be/Z4E2drxNjMk?start=16236

Задача миграции проектных шаблонов

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

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

Приведу еще раз все необходимые шаги для последовательной миграции шаблонов с bem-xjst v1.x до v8.x здесь.

bem-xjst v1.x → v2.x

• def() режим должен возвращать хоть что-то.
• все поля шаблонизатора доступные ранее в this._ теперь переехали просто в this.
• нет больше mode('') (режима с пустым именем), используйте def().
• подпредикат block(…) теперь обязателен для всех шаблонов.
• this._str больше не существует.
• изменилось поведение apply('modeName').
• результат вызова режима tag() теперь имеет приоритет над полем tag из BEMJSON-а.

bem-xjst v2.x → v3.x

• apply.call(BEMJSON) нужно исправить на apply(BEMJSON).

bem-xjst v3.x → v4.x

• block('b').wrap()(function() { … }) вместо block('b').wrap().def()(function() { return applyCtx({ … }); }).

bem-xjst v4.x → v5.x

• Необходимо заменить elemMatch(argument) на elem('*').match(function() { ... }). elemMatch() упразднен.
• Поведение полей mods и elemMods в BEMJSON изменено. bem-xjst больше не будет воспринимать mods как elemMods.
• API изменено: require('bem-xjst') теперь возвращает два движка bemhtml и bemtree. Просто замените require('bem-xjst') на require('bem-xjst').bemhtml.

bem-xjst v5.x → v6.x

• результат вызова режима tag() теперь имеет приоритет над полем tag из BEMJSON-а.

bem-xjst v6.x → v7.x

• this.isArray() устарел, используем Array.isArray().
• once() устарел и выпилен, используем просто def().
• Теперь bem-xjst для сравнения значения модификатора из подпредиката шаблона и из BEMJSON-а предварительно приведет значение из BEMJSON-а к строке. Это может вызвать несоответствие поведения с версией v6.x. Поэтому считаем хорошей практикой, когда значения модификаторов — строка. Пример, результат которого можно сравнить в v6.x и v7.x
• Опционально: v6.x по умолчанию генерила закрывающие слеши у одиночных тегов. В v7.x это поведение отменено и она по умолчанию генерит HTML а не XHTML. Чтобы вернуть закрывающие слеши можно воспользоваться опцией bem-xjst xhtml: true.

bem-xjst v7.x → v8.x

• Для обратной совместимости необходимо заменить режимы mix() на addMix(), attrs() на addAttrs(), js() на addJs().

Автомигратор

В связи с этим длинным хвостом технологических долгов я сделал автомигратор шаблонов и статический линтер.

Автомигратор доступен в bem-xjst v7.x и v8.x (актуальные версии) и умеет править код проектных шаблонов так, чтобы он начал соответствовать указанной мажорной версии.

Под капотом обычный jscodeshift и тесты на трансформации кода. Если появятся какие-либо вопросы после прочтения документации создавайте issue в репозитории шаблонизатора.

Статический линтер

Кроме того, вы можете запускать статические проверки для ваших шаблонов и включить их (наравне с runtime проверками) в ваш процесс разработки.

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

https://youtu.be/cDLhO3Psygc

Опять вопрос! Суть простая, есть блок topmenu с элементами, по нажатию открываю меню, и хочу для блока page задать дополнительный модификатор

с jquery проблем не возникает

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

provide(bemDom.declBlock(this.name, {
    onSetMod : {
        'js' : {
            'inited' : function() {
                this._domEvents('sublink').on('click', function() {
                    this.findChildElem('subwrap').toggleMod('visible', true);
                    $('.page').css('overflow', 'hidden')
                });
            }
        }
    }
}));

});

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

Brief news about the BEM world since the beginning of this year:

Documentation news

• Updated document BEM project building methodology.
• Published a new document about deps.js — a technology to declare dependencies.
• Made a lot of minor changes in the methodological part of documentation.

Site news

Rolled out the BEM libraries section in a new design on bem.info:

• bem-components
• bem-core

Libraries news

bem-core

• Released bem-core 4.1.0 and 4.1.1. All changes of the both releases are described in a CHANGELOG.

bem-components

• Released bem-components v4.0.0 with update of controls design and with the transition from the Stylus to postCSS.
• Released bem-components 5.0.0 that used bem-core 4.1.1. There are two style sets in v5.0.0: source files with postCSS and compiled CSS in case you prefer to use some preprocessor.

bem-history

• Not yet released but is already used in a separate branch v4. This version is compatible with bem-core v4. Feel free to try, revise and send us a feedback before we release a new version. The major change is rename of uri block to uri__querystring element, which extends the basic implementation of the same name module in bem-core with Uri class. Class methods remained unchanged.

bem-react-core

• Working on BEM React Core — a core library for develop with React and BEM methodology.
• Released a complete documentation package: README, REFERENCE и CONTRIBUTION GUIDE.

Technologies news

bem-express

Released the following major updates:

• Updated bem-core to 4.1.1 and bem-components to 5.0.0.
• Began to use PostCSS instead of Stylus. We provide the same set of plugins that bem-components has.
• Implemented an optional livereload. For details read the documentation and README of the project.
• Achieved the speed acceleration of the build procedure by updating npm-modules required for assembly.
• Abandoned bower to supply libraries. Now all dependencies are set through npm in node_modules directory.

bem-xjst

• v8.3.1 (v7.4.1)

  • extend() mode fixed. Now it works as expected.
  • Documentation updated: this.extend(o1, o2) description added.

• v8.4.0 (v7.6.0)

  • New unquotedAttrs option allows us to ommit unnececary quotes of HTML attributes in some cases.

• v8.4.1 (v7.6.1)

  • extend(function(ctx, json) { … }) mode callback now have two arguments, the same as have the callbacks of other modes. The first argument is a link to context of (this) template execution. The second — link to a BEMJSON node.

• v8.4.2

  • Escaping functions fixed: now argumengs undefined or null and NaN will give you empty string as a result. In previous versions you get stringified results ('undefined', 'null', 'NaN').

• v8.5.0

  • BEMTREE: added modes related to data: js(), addJs(), mix(), addMix(), mods(), addElemMods(), elemMods(). The rest of the modes that are relevant only to-HTML are available in BEMHTML.

• v8.5.1

  • Fixed bug: calculate position if block/elem was replaced via replace().

• v8.5.2 (v7.6.4)

  • Fixed bug in BEMTREE related to the rendering of special value field content { html: '<unescaped value>' }.
  • bem-xjst onlinе demo updated:
    • Added a switch of BEMHTML/BEMTREE engines.
    • Added a plug for BEM.I18N (), which returns its second argument. This is useful to copy the code from production to a sandbox.
  • README updated.
  • A sandbox updated. You could help our projest to fix issues with help wanted lable.

enb-bemxjst

• Released a new version of enb-bemxjst v8.5.2 with "dependencies": { "bem-xjst": "8.5.2" }. However, we continue to actively support the both branches: 7.x and 8.x.

All changes are described in releas notes v8.5.2 and v7.6.4 and in a CHANGELOG.

BEM toolbox news

bem-tools

Released bem-tools 2.0.0 with updated bem-tools-create. Detailed description is in README.

bem-walk

Wrote a full and clear README.

project-stub

• Implemented a new version of bem-components v5.0.0 taking into account the transition to postCSS and a new version of bem-tools 2.0.0.
• As an experiment, included gulp-bem in a project-stub.

Обнаружил следующую проблему: gulp игнорирует bemhtml-ы элементов, если у блока стоит миксом другой блок

Пример тут: https://github.com/rteamx/project-stub/commit/77c4e6bb74a5fc3893b83abc7f5e6c0f90bb1def

• Запускаем gulp build и в готовый html не приходят теги для элемнтов my-block__title и my-block__subtitle (первый должен быть h1, второй - h2).
• Убираем в desktop.bundles\page\page.bemjson.js микс mix: { block: 'wrapper' }, запускаем сборку gulp build, и вауля - теги пришли.
• ENB все по колено. И если собирать галпом после сборки ENB, то выше описанной проблемы нет, видимо причина в том, что после ENB появляется файл desktop.bundles\page\page.bemdecl.js или в чем-то другом?

Как можно решить эту проблему с галпом?

Исходный проект - project-stub В корне проекта создана папка для своей библиотеки/дизайна. Структура такая же, как и в bem-components. Уровни добавлены в gulpfile levels: [ 'node_modules/bem-core/common.blocks', 'node_modules/bem-core/desktop.blocks', 'node_modules/bem-components/common.blocks', 'node_modules/bem-components/desktop.blocks', // 'node_modules/bem-components/design/common.blocks', // 'node_modules/bem-components/design/desktop.blocks', '.custom_libs/bove/design/common.blocks', '.custom_libs/bove/design/desktop.blocks', 'common.blocks', 'desktop.blocks' ],

При сборке выдает лог: Starting 'build'... events.js:160 [ throw er; // Unhandled 'error' event ^ 15:23:44Error: ENOENT: no such file or directory, scandir 'D:\Verstka\osipbove-bem-project.custom_libs\bove\design\desktop.blocks' ] at Error (native) The following tasks did not complete: build [15:23:44] Did you forget to signal async completion?

Process finished with exit code 1

Подскажите - куда копать при иных уровнях переопределения?

Подскажите как сделать так, чтобы по файлу BEMJSON папки и файлы(стилей скриптов и др) создавались сами.

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

P.S. Чтобы подключить bem-tools нужно на уровне проекта прописать npm install bem верно ? или просто в терминале это прописать? Куда он тогда установится

P.P.S. В документации к тулзу написанно, что можно создавать для БЭМ сущностей css, js файлы, а так же bemhtml. Нужно ли это делать или bemhtml идет один на бандл(страницу).

Всем привет! Опять с вопросом! Обновился до bem-core 4.1.1 и обнаружил засаду. Простая операция, закрытие модального окна по крестику, не поддается. Может есть примеры реализации простых операций на новой версии, для особенно "одаренных", например как тут http://bem.github.io/bem-bl/sets/common-desktop/i-bem/i-bem.ru.html

код файла modal_has-close.js

modules.define('modal', function(provide, Modal) {

provide(Modal.declMod({modName: 'has-close'}, {
    onInit : function() {
        this._domEvents('close').on('click', function() {
            this.delMod('visible');

        });
    }
}
));

});

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

Привет!

Уже в эту пятницу, 27 января в московском офисе Яндекса пройдет очередной митап по БЭМ для новичков.

Мы продолжим обсуждать темы, которые затронули на предыдущей встрече. Кстати, если вы ее не посетили и еще не успели посмотреть записать — сейчас самое время!

https://www.youtube.com/watch?v=Ai-yt0b8iKE

Кроме того, в программе:

• архитектура проекта, основанного на компонентном подходе;
• инструменты, упрощающие жизнь фронтенд-разработчика; и, конечно, ответы на все ваши вопросы.

Участие бесплатное, но не забудьте зарегистрироваться!

До встрече на BEMup-е :)

Коротко о том, как мы завершили прошлый год и с чем вошли в новый.

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

• Полностью обновили документ про сборку БЭМ-проектов. Свежий, красивый и понятный читайте на bem.info.
• Опубликовали новый документ про то, как описывать зависимости в БЭМ.
• Написали спецификацию для DEPS в БЭМ.
• Внесли много мелких правок в методологической части документации.

Новости сайта

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

• bem-components
• bem-core

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

bem-core

• Выпустили bem-core 4.1.0 и 4.1.1. Все изменения, вошедшие в оба релиза, описаны в CHANGELOG.

bem-components

• Выпустили обещанную в прошлом дайджесте bem-components v4.0.0 с небольшим обновлением дизайна контролов и переходом со Stylus на postCSS.
• Выпустили долгожданную версию bem-components 5.0.0, которая под капотом использует bem-core 4.1.1. В версию 5.0.0 вошли сразу два набора стилей: исходники на postCSS и скомпилированный CSS на случай, если вы предпочитаете использовать препроцессор.

bem-history

• Пока не выпустили в релиз, но призываем вас уже посмотреть и пощупать библиотеку в отдельной ветке v4. Эта версия совместима с bem-core v4.
  Главное изменение — переименование блока uri в элемент uri__querystring, который расширяет базовую реализацию одноименного модуля из bem-core классом Uri. Методы класса сохранились без изменений.

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

bem-react-core

• Работаем над BEM React Core — библиотекой для описания React-компонентов в виде деклараций БЭМ-сущностей.
• Разработали полный пакет документации: README, REFERENCE и CONTRIBUTION GUIDE.

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

bem-express

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

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

bem-xjst

• v8.3.1 (v7.4.1)

  • Исправлен баг в режиме extend(). Теперь режим работает как ожидается.
  • Дополнена документация: описание this.extend(o1, o2).

• v8.4.0 (v7.6.0)

  • Новая опция unquotedAttrs позволяет не выводить двойные кавычки у тех HTML-атрибутов, значения которых позволяют это сделать.

• v8.4.1 (v7.6.1)

  • Колбек режима extend(function(ctx, json) { … }) теперь принимает такие же аргументы, как и остальные колбеки в других режимах. Первый — ссылка на контекст исполнения шаблона (this), второй — ссылка на узел BEMJSON, на который сматчился шаблон.

• v8.4.2

  • Функции экранирования теперь возвращают пустую строку, если аргументом был undefined, null или NaN. Раньше вы получали результат приведения к строке, что было исправлено.

• v8.5.0

  • В BEMTREE добавлены режимы, имеющие отношение к данным: js(), addJs(), mix(), addMix(), mods(), addElemMods(), elemMods(). Остальные режимы, которые имеют отношение только к HTML, доступны в BEMHTML.

• v8.5.1

  • Исправлен баг с расчетом this.position во время использования режима replace().

• v8.5.2 (v7.6.4)

  • Исправлен баг в BEMTREE, связанный с рендерингом специального значения поля content { html: '<unescaped value>' }.
  • Обновлена bem-xjst onlinе demo:
    • Добавлен переключатель движков BEMHTML/BEMTREE.
    • Добавлена заглушка для BEM.I18N(), которая возвращает свой второй аргумент. Это удобно для копирования кода из продакшена в песочницу.
  • Обновлен README: описали основные отличия шаблонизатора, фичи и т.д.
  • Силами Михаила Степанова обновлена песочница. Вы тоже можете помочь: у нас есть задачи, помеченные как help wanted.

enb-bemxjst

• Выпустили новую версию enb-bemxjst v8.5.2 с зависимостью "dependencies": { "bem-xjst": "8.5.2". Однако продолжаем активно поддерживать две ветки: 7.x и 8.x.

Обо всех изменениях читайте в примечаниях к релизу v8.5.2 и v7.6.4. Полный список изменений описан в CHANGELOG.

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

bem-tools

Выпустили bem-tools 2.0.0, где обновили bem-tools-create. Подробности читайте в документации.

bem-walk

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

project-stub

• Внедрили новую версию bem-components v5.0.0 с учётом перехода на postCSS и новую версию bem-tools 2.0.0.
• В качестве эксперимента включили gulp-bem в project-stub.

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

• Выступили на DevCon School: Технологии будущего с докладом «Разрабатываем ASP.NET MVC приложение с БЭМ-фронтендом».
• Рассказали на форуме об опыте внедрения gulp-bem.
• Антон Виноградов ответил на вопросы про bem-xjst и React.
• Занялись портированием Animate.CSS на БЭМ. Инструкция по подключению.
• Работаем над библиотекой блоков для типографики.
• Провели BEMup для новичков, где рассказали про независимые блоки с самого начала — очень понятно и без BEMJSON/BEMHTML/bem-tools. Поговорили про сценарии, когда один проект требуется распараллелить на несколько разработчиков. Для тех, кто пропустил, опубликовали скринкаст с BEMup'а для начинающих.
  https://youtu.be/Ai-yt0b8iKE

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

modules.define('folderIcon', ['i-bem__dom'], function (provide, BEMDOM) {
    provide(BEMDOM.decl(this.name, {}));
});
modules.define(
    'folderIcon',
    ['jquery'],
    function(provide, $, Icon) {
        provide(Icon.decl({ modName: 'view', modVal: 'icon' }, {
            getIcon: function() {
                var _this = this;
                $.ajax({
                    type: 'POST',
                    dataType: 'json',
                    url: '/folder/icon',
                    cache: false,
                    context: this
                }).done(function (json) {
                    Icon.update(_this.elem('wrap'), json);
                });

                return this;
            }
        }));
    }
);

Если я захочу вызвать этот блок методом: this.findBlockInside('folderIcon');, то js ругается, посмотрев в консоле, выдаёт такого рода ошибку: Uncaught TypeError: Cannot read property 'filter' of undefined(…), подскажите, пожалуйста, в чём суть ошибки и где не дописал код.

Привет!

Сегодня в bem-history появилась веточка v4, совместимая с bem-core v4.

Главное изменение — переименование блока uri в элемент uri__querystring, который расширяет базовую реализацию одноименного модуля из bem-core классом Uri. Методы класса сохранились без изменений.

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

Приятного использования!

Прочитал документацию и возник вопрос как создать свой первый сайт по БЭМ

А конкретно работа с BEMJSON файлом и сборщиком.

Как новичку сложно разобрать пример на сайта методологии. Может кто сможет объяснить простыми словами. На примере "Hell World" Без использования полного комплекта project-stub

Думаю многим новичкам будет интересно. Как по пунктам создать сайт с фразой Hell World Используя BEMJSON и сборщик!

Хорошего вечера всем!

У меня проблема, не могу самостоятельно разобраться. Существует ссылка, она является "элементом" блока "список" (список меню). До БЭМ ссылка имела анимацию по состоянию :hover, псевдоэлементы before, after окрашивались.

.nav__ul a:after {
    width: 100%;
    height: 2px;
    background-color: #68bdf8;
    position: absolute;
    bottom: 0;
    left: 0;
    content: '';
    transition: .4s;
    transform: scale3d(0, 1, 1);
    backface-visibility: hidden;
    z-index: -1;
}

.nav__ul a:hover:after {
    transform: scale3d(1, 1, 1);
}

В БЭМ методологии существует реализация присвоения классов __hovered, __focused. Стилизовав эти псевдоэлементы анимации не происходит, скорее всего эти классы имеют статичное состояние.

link__hovered:after {
    width: 100%;
    height: 2px;
    background-color: #68bdf8;
    position: absolute;
    bottom: 0;
    left: 0;
    content: '';
    transition: .4s;
    transform: scale3d(0, 1, 1);
    backface-visibility: hidden;
    z-index: -1;
}

link__hovered:after {
    transform: scale3d(1, 1, 1);
}

Проект - https://github.com/DjonyBastone/osipbove-bem-project.git Нужное поведение, реализовано через состояние объекта (::hover), а не через класс link__hovered

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

Структура:

common.blocks/
    menu/
        __link/                                
            menu__link.css

Стили с этого элемента не приходят при сборке. Сборка Gulp, клон проекта - project-stub , конфигурацию gulpfile не трогал.

1) Сборка Gulp'ом должна производится при схеме Nested? Настроено ли это в project-stub?

2) Если должно собираться в чем может быть ошибка? Пожалуйста помогите разобраться. Ссылка на проект - https://github.com/DjonyBastone/osipbove-bem-project

Всем привет! Пользовался только css и проблем не было, но решил попробовать блок форм bem-forms. При сборке enb все собирается на ура и формы отображаются как нужно, а вот если через gulp, то обычный css собирается нормально, а конструкции как ниже уже в сборку не попадают.

`.label {

    display: inline-block;

    font-weight: 600;

    padding-bottom: 5px;



    &_disabled {

        opacity: .5;

    }

}`

Платформа/Шаблоны (BEMHTML, BEMTREE)/Быстрый старт/online demo https://bem.github.io/bem-xjst/

В результирующем коде должен быть элемент 'image'. Но его нет. Пытаюсь повторить блок с логотипом на своем проекте. И не могу врубиться что не так с кодом.

Подскажите - в чем дело!?

Привет помогите пожалуйста, почему я все никак не могу получить bemhtml на клиенте вроде все ок и зависимости и все позвал. и да такой вопрос если я все пишу через bemtree (ну как bemhtml у меня чисто для тегирования и атрибутов, то есть пока там только разная мелочь) и по сути у меня нет шаблона я просто хочу использовать сам шаблонизатор на клиенте, что я делаю не так?

modules.define('manager', ['i-bem__dom', 'BEMHTML', 'menu', 'jquery'], function(provide, BEMDOM, BEMHTML, MenuEvent, $) {

    provide(BEMDOM.decl(this.name, {
        onSetMod : {
          'js' : {
            'inited' : function() {
                MenuEvent.on('update', this._taskUpd, this);
            }
          }
        },
        _taskUpd : function () {

            this.setMod(this.elem('content'), 'action', 'artAdd');

            var bemjson = {
                block: 'content',
                content: [
                ]
            };

            var html = BEMHTML.apply(bemjson);

            console.log(html);

            BEMDOM.update(this.elem('content'), html);

            return false;
        }
    }));

});

зависимости

({
  shouldDeps: [
      { elem: 'control'},
      { elem: 'content'},
      { mods: { action: 'article'} },
    { block: 'modal', mods : { theme : 'islands', autoclosable : true }},
    'button',
    'content',
    'menu',
    { block: 'i-bem', elem: 'dom' },
    { tech: 'js', mustDeps: { elem: 'content', tech: 'bemhtml' } }
  ]
})

Доброго времени суток. Подскажите пожалуйста кто знает, почему в bem-components и bem-core не используется SASS, а вместо этого все манипуляции над css совершаются с помощью JS? Чем обусловлен такой подход? Хочется очень услышать аргументы.

И небольшое пожелание по поводу ваших библиотек для BEM: запилите реализацию норм грида. Спасибо

Нашел на форуме в одной из тем ссылку на дифф

Не понимаю пока, как осуществляется связь между обычной сборкой и сборкой merged-bundle.

Как я понял, смысл в том, чтоб собрать в одной папке все bemdecl, слить их в один файл и получить общие стили и скрипты. Привожу кусок из документации по процессу сборки

Процесс сборки

1. Какие таргеты необходимо билдить ENB узнаёт из команды enb make [target]. 
Если вы запустили enb make без указания конкретного таргета, 
ENB будет собирать все таргеты, определенные в make.js.
2. ENB инициализирует ноды, участвующие в сборке указанных таргетов. 
В это время каждая нода спрашивает у технологий 
(которые регистрировались внутри ноды) список таргетов.
3. Запускаются технологии, которые отвечают за те таргеты, которые необходимо билдить.
4. В процессе выполнения технология может потребовать у ноды другие таргеты, 
необходимые для сборки (с помощью метода requireSources). 
В таком случае технология приостанавливается, нода запускает технологии, 
отвечающие за требуемые таргеты (если они не запущены) и после того, как технологии
 заканчивают сборку нужных таргетов, продолжает свою работу искомая технология.
5. После того, как технология выполнила свою работу по сборке таргета, 
она оповещает об этом ноду (с помощью метода resolveTarget).
6. Сборка завершается после того, как все необходимые таргеты собраны.

В конфиге настраиваются ноды. В модуле '.enb/techs/merged.js' тоже настраивается нода.

...
merged(config, pathToMergedBundle); // в этом модуле исп-ся bemdecl-файлы страниц, но откуда они? Ведь их сборка идет ниже!
...

Не вижу связи между моментом сборки всех страниц (появление bemdecl-файлов) и сборки уже merged-bundle на их основе.