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

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

Начал проект на свежей версии bem-core. Предыдущая была - 3.2.0, в связи с этим возникло много вопросов, и этот - самый проблемный. У меня прекрасно ищутся элементы:

this.findChildElem({elem: 'row', modName: 'error', modVal: true})

Но вот при попытке найти аналогичным образом блок

this.findChildBlock({block: 'input', modName: 'email', modVal: true})

Мне валится ошибка: Block must be a class or description (block, modName, modVal) of the block to find.

На странице https://ru.bem.info/platform/i-bem/dom/ пример вообще достаточно странный:

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

provide(bemDom.declBlock(this.name, {
    onSetMod: {
        'js': {
            'inited' : function(modName, modVal) {
                this._button = this.findChildBlock(Button);
            }
        }
    }
}));

});

Из него вообще не понятно, как мне найти внутри блока 'attach', например, блок 'button' такого вида:

{ block: 'button', modName: 'foo', modVal: 'bar' }

Подскажите, пожалуйста, что я делаю не так?

Добрый день! Столкнулся с тем, что добавление модификатора type: 'password' никак не отражается на разметке блока. Имею такой bemjson:

{
    block: 'input',
    mods: {width: 'available', 'has-clear': true, type: 'password'},
    name: 'password', 
    placeholder: 'Password',
    tabIndex: 2
}

На выходе получаю такой html:

<span class="input input_width_available input_has-clear input_type_password i-bem input_js_inited" data-bem="{&quot;input&quot;:{}}">
    <span class="input__box">
        <input class="input__control i-bem input__control_js_inited" name="password" tabindex="2" placeholder="Password">
    </span>
</span>

Полез смотреть в код элемента 'control' в файле input__control.bemhtml.js, и там вижу следующий код:

block('input').elem('control')(
    tag()('input'),

    addAttrs()(function() {
        var input = this._input,
            attrs = {
                id : input.id,
                name : input.name,
                value : input.val,
                maxlength : input.maxLength,
                tabindex : input.tabIndex,
                placeholder : input.placeholder
            };

        input.autocomplete === false && (attrs.autocomplete = 'off');
        this.mods.disabled && (attrs.disabled = 'disabled');

        return attrs;
    })
);

Я полагал, что код, написанный в input_type_password.bemhtml.js

block('input').mod('type', 'password').elem('control').attrs()(function() {
    return this.extend(applyNext(), { type : 'password' });
});

докинет в контекст выполнения шаблона поле 'type' со значением 'password', и это поле мы дернем в шаблоне элемента 'control' как-нибудь так:

attrs = {
    ...
    type: this.type
}

Объясните, пожалуйста, обращение к этому свойству просто забыли написать или я неправильно понимаю процесс работы шаблонизатора? И если второе, то как мне сделать так, чтобы этот атрибут всё-таки попал в разметку?

Добрый день. Помнится должен был пройти вебинар 23.03.2017 или 24.03.2017 (могу ошибаться, но примерно в этих датах). Есть запись? Все обыскал, но найти не могу, также нет никакого упоминания.

Добрый вечер! Пытаюсь собрать в один файл стили своих компонентов и стили в *.post.css-файлах из bem-components. Как понимаю, для этого нужна технология enb-postcss, которую я беру отсюда: https://github.com/awinogradov/enb-postcss Я добавляют postcss в технологии:

let postCSS = require('enb-postcss/techs/enb-postcss');

module.exports = function(config) {
    config.node('bundles/index', function(nodeConfig) {
        nodeConfig.addTechs([
            ...
            [postCSS, {
                comments : true,
                sourcemap : true,
                plugins : [require('postcss')()],
                oneOfSourceSuffixes : [['post.css', 'css'], ['ie.post.css', 'ie.css']],
                target: '?.post.css'
            }]
        ]);
        nodeConfig.addTargets(['?.post.css']);
    });
};

В index.post.css получаю набор импортов в соответствии с построенным .deps.js файлом:

/* ../../libs/bem-components/common.blocks/button/button.post.css:begin */
@import "../../libs/bem-components/common.blocks/button/button.post.css";
/* ../../libs/bem-components/common.blocks/button/button.post.css:end */

/* ../../libs/bem-components/common.blocks/input/input.post.css:begin */
@import "../../libs/bem-components/common.blocks/input/input.post.css";
/* ../../libs/bem-components/common.blocks/input/input.post.css:end */

И теперь мне непонятно, куда и как мне передавать и этот файл, и stylus-файлы моих блоков, чтобы на выходе получить css-ку?

Здравствуйте. В стандартной сборке bem уже есть jquery, на данный момент там версия 3.1.0. Провайдим, пользуемся, всё отлично, спасибо. НО: Вопрос следующего характера: как "bem-правильно" выплюнуть jquery в глоб. пространство, чтобы jquery было доступно из консоли в браузере ( сейчас ни jQuery, ни $ не видит) ?

Спасибо!

На основе project-stub создал репозиторий Создал блок fancybox, реализация js, css.

jquery.fancybox.js подключается, с этим вопросов нет.

Но консоль выдает ошибку о неизвестном аргументе - jQuery

• Если в bemjson.page, в теле head прописываю явно - jQuery брать с cdn, то проблем нет.
• То есть загрузка по умолчанию добавляет jQuery в последнюю очередь, в следствии чего jQuery is not defined

По умолчанию загрузка jQuery - быстрее всего - 3-5ms Явно - jQuery брать с cdn - 200-300ms

Вопросы: 1) Как сделать что бы fancybox работал с загрузкой jQuery которая по умолчанию. mustDeps - не помогают. 2) В чем магия со скоростью загрузки? 3) cdn Яндекс быстрее, чем cdn Гугла - это только у меня?

Шрифт слишком тонкий и его сложно читать на ноутбуке с fullhd разрешением. Еще заметил на мобильной версии у заголовков слишком большой междустрочный интервал.

Добрый вечер! Помогите, пожалуйста, со следующей проблемой. Имею такой bemjson:

module.exports = {
    block: 'page',
    title: 'Authorization',
    head : [
        { elem : 'meta', attrs : { name : 'description', content : '' } },
        { elem : 'css', url : 'index/index.css' }
    ],
    scripts: [{ elem : 'js', url : 'index/index.js' }],
    content: {
        block: 'wrapper',
        content: {
            block: 'auth'
        }
    }
}

Вот такой шаблон:

block('auth')(
    js()(true),

    content()(() => {
        return 'Hello, world!'
    })
)

И вот такое вот js объявление блока:

modules.define('auth', ['i-bem__dom'], function(provide, BEMDOM) {
    provide(BEMDOM.decl(
        this.name,
        {
            onSetMod: {
                'js': {
                    'inited': function() {
                        console.log('auth inited');
                    }
                }
            }
        }
    ))
});

Не происходит инициализация блока 'auth'. Не могу понять, где ошибка: имя блока в шаблоне и декларации совпадают, js в шаблоне включен, в зависимостях page'а автоматическая инициализация тоже прописана. В результирующий js декларация попала, js на страницу - тоже. В консоль никаких ошибок не валится. Класс i-bem в html-разметке тоже присутствует:

<div class="auth i-bem" data-bem="{&quot;auth&quot;:{}}">Hello, world!</div>

Добрый! Есть таск

function less() {
  return bundler('*.bundles/*')
    .pipe(builder({
      less: bundle => {
        bundle.src('less')
          .pipe(gulpLess())
          .pipe(postcss([
            postcssImport(),
            postcssUrl({ url: 'inline' }),
            autoprefixer({browsers: prefixes}),
            postcssReporter()
          ]))
          .pipe(concat(bundle.name + '.min.css'))
          .pipe(gulpif(isProd, csso()))
      }
    }))
    .on('error', console.error)
    .pipe(debug())
    .pipe(gulp.dest(file => path.dirname(file.path)));
}

Крашится

TypeError: Cannot read property 'block' of undefined
    at data.forEach.dep (/home/arsen/dev/nodeprojects/njs_nian/node_modules/@bem/deps/lib/formats/deps.js/parser.js:29:37)
    at Array.forEach (native)
    at depsData.forEach.record (/home/arsen/dev/nodeprojects/njs_nian/node_modules/@bem/deps/lib/formats/deps.js/parser.js:27:14)
    at Array.forEach (native)
    at parse (/home/arsen/dev/nodeprojects/njs_nian/node_modules/@bem/deps/lib/formats/deps.js/parser.js:23:14)
    at Promise (/home/arsen/dev/nodeprojects/njs_nian/node_modules/@bem/deps/lib/parse.js:11:25)
    at /home/arsen/dev/nodeprojects/njs_nian/node_modules/@bem/deps/lib/parse.js:9:16

Есть каталог common.blocks в корне, там button, внутри .js файл, .browser.js, .less, .deps.js и Page, в нем те же технологии

Билдер

const builder = Builder({
  levels: [
    'common.blocks',
    'desktop.blocks'
  ],
  techMap: {
    bemhtml: ['bemhtml.js'],
    js: ['js'],
    less: ['less']
  }
});

Что я делаю не так? Хотелось бы поподробнее узнать о библиотеках

const Builder = require('gulp-bem-bundle-builder');
const bundler = require('gulp-bem-bundler-fs');

И можно ли с помощью них полноценно собирать БЭМ проекты на gulp?

Привет, сделал стартовый шаблон для gulp'а. Из коробки шаб заточен для решения задач по верстке. Есть поддержка популярных препроцессоров LESS / Sass / Stylus и возможность писать просто HTML или Pug / Twig (многим новичкам не хватает привычных инструментов). Принцип работы прост, на основе HTML идет поиск блоков элементов и модификаторов и осуществляется сборка. Есть уровни переопределения, автоматическое создание файлов для блока, в общем присоединяйтесь к тестированию, кому интересно.

Привет. Я сделал модификатор input, который добавляет очень полезные функции. Можно ли использовать этот модификатор у наследника input - у textarea? Или это решается только через миксины?

Здравствуйте! Довольно наболевшая для меня тема, вот дошли руки написать. Есть несколько вопросов по вот этой сборке: https://github.com/bem/project-stub

1. Как должен выглядеть файл make.js чтобы собирался merged bundle (самому написать пока-что представляется сложным, говорят нужно nodejs учить), что-то мне кажется инфа с bem.info про сборку merged бандла устарела. Ну и так как собирать можно не только enb, но и gulp'ом, как должен выглядеть gulpfile.js?

2. Допустим я пишу в phpStorm, в сборках более ранних версий я без проблем писал на stylus или sass. Но postCSS (.post.css || .pcss) не поддерживается в шторме (да плагинов рабочих я для него не сыскал), и следственно написание postCSS вызывается сложности в виде 100500 подчеркиваний красной волнистой ну и файлы css не понимают синтаксиса (капитан очевидность). Кто-нибудь видит адекватное решение в такой ситуации?

3. Как прикрутить к последней сборке sass вместо postcss (ну нравится мне sass/scss :) ) ???

Мне кажется было бы неплохо если бы в стандартной сборке был бы предусмотрен свитч между препроцессорами (какие человеку нравятся ну или хотябы sass||postCSS) , а так же между обычной сборкой и merged, удобно ведь было бы)

Здравствуйте можно ли вкладывать блок в элемент? например пишу так: https://jsfiddle.net/fsj2pczs/

Добрый день. Подскажите:

1. как подружить bem и golang?
2. как правильно передавать данные с сервера на клиента?

Привет!

Мы, наконец, выпустили новые версии bem-core и bem-components!

bem-core 4.2.0

Версия полностью обратносовместимая, так что обновление должно быть совершенно «бесплатным».

Главным изменением является совместимость с bem-xjst 8.x. Кроме того в версию вошла большая работа по переводу документации на английский и, конечно же, исправления ошибок и мелкие улучшения. Подробности читайте в changelog.

bem-components 5.1.0

Версия также является обратносовместимой и не должна требовать никаких усилий при обновлении.

В ней обновлена зависимость от bem-core до 4.2.0, добавлено визуальное оформление для link_disabled и исправлены некоторые ошибки.

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

bem-components 6.0.0

Эта версия обязательно требует обновления до bem-xjst 8, где появились новые полезные режимы и исправлена работа режима extend. Необходимые пакеты для сборки на ENB (enb-bemxjst 8.6.7) или gulp (gulp-bem-xjst 3.0.0) уже доступны для установки.

При переходе вам может пригодиться автоматический мигратор шаблонов: https://github.com/bem/bem-xjst/tree/master/migration#migration-tool-for-templates

Кроме новых шаблонов версия ничем не отличается от 5.1.0.

Где попробовать

Свежие bem-core 4.2.0 и bem-components 6.0.0 уже внедрены в project-stub.

Если при обновлении у вас возникнут какие-либо проблемы — пишите, мы постараемся помочь.

В мире web я новичок, просматривая чужой код, постепенно прихожу к мысли начать использовать процессор для CSS (выглядит все уж слишком удобно) Прочитал несколько статей и остановился на препроцессор SCSS и процессоре PostCSS.

Хочу узнать мнение БЭМ сообщества, что вы посоветуете, для удобной работы с классами написанными по БЭМ. Или может не стоит выбирать, а использовать их одновременно ?

Очень понравилась идея независимых блоков, но возник ряд вопросв: 1) Мне нравится Django, я хочу применять БЭМ в проектах на этом фреймворке, натыкался на пост https://ru.bem.info/forum/483/ , есть ли способы это сделать проще, уже 2017 год.. 2) Непонятно, как организовать взаимодействие компонентов, типа нажал на кнопку "Купить", отреагировала корзина.. Смотрел вебинары, советуют через посредника делать, в общем блоке, но если я перенесу кнопку, и она окажется вне этого посредника, все может поломаться.. 3) Куда складывать библиотеки, типа всяких jqtree и прочих? Как отдельный блок? 4) Как обстоят дела с Angular2? 5) Как сделать так, чтобы с каждой динамической страницей Django, полученной через рендер шаблона, на клиент отдавалась статика, необходимая только для действительно необходимых компонентов Спасибо.

Использую postcss и bh, хочу подключить файл с переменными, общий для всего проекта. Как это правильней сделать?

Есть ли возможно получить js файл с фреймворком i-bem.js ? Гуглил, искал, но не нашел. Только какие-то исходники разделенные на атомы или наоборот смешанные с js компонентов и так далее, а нужен файлик только с i-bem (не последней версии, нужен тот, где обращение к элементам идет так: this.findBlockInside('block');)

Как то снова не пришло ни какого оповещения о событии, помогло только периодическое просматривание календаря событий яндекса. На самом форуме(этом) кнопка события ни чего не выдает адекватного. Давайте как нибудь это поправим, готов посодействовать чем смогу))

Вебинар по БЭМ Немного БЭМ в вашем React переносится на 29 марта. Теперь вам не придется выбирать между двумя интересными событиями:

• 15 марта пройдет React Moscow Meetup #2. Регистрация еще открыта.
• 29 марта состоится вебинар по БЭМ от Антона Виноградова. Актуальная ссылка на трансляцию здесь: https://www.youtube.com/watch?v=UeqPPkGXmbE

Stay BEMed!

Напишите способы упаковки и деплоя фронтенд сервера, кто и как это делает

Добрый день! В i-bem.js можно обратиться к блоку в трех направлениях - родитель, дочерний, на себе. А как можно обратиться к соседнему (братскому) блоку в i-bem.js?? Пробовал через общего родителя, не получается. Видимо не правильно обращаюсь, либо всплытие только линейное, и братский блок не отлавливает событие сплывшее на родителе. Пожалуйста помогите разобраться