block vs. block_mod apply bug (order matters!)

[1999]

BEMJSON

{
    block: 'button',
    mods: {foo: true}
}

bh.match('button_foo', function(ctx) {
   ctx.content('mod');
});

bh.match('button', function(ctx) {
   ctx.content('base');
});

Result HTML

<div class="button button_foo">
base
</div>

Expected HTML

<div class="button button_foo">
mod
</div>

if you reorder bh.match() calls, everything works as expected.

[1999]

cc @megatolya

[qfox]

Compare this:

.button_red { color: red }
.button { color: green }

with this:

bh.match('button_red', function(ctx) { ctx.content('red'); });
bh.match('button', function(ctx) { ctx.content('green'); });

Button should be green. Okay?

[1999]

@zxqfox let's assume that you have this bemjson: {block: "button", mods: {red: true}}. Then it shouldn't. Templates are applied from the most specific to the least one. In your case button_red template will be applied first and it will set content ("red"). Then button template should be applied, but content has already been set, so its content won't change.

[qfox]

@1999 Actually. It should even if you have {block: "button", mods: {red: true}}.

.button_red, as well as bh.match('button_red', should go last to have the most weight.

.button { color: green }
.button_red { color: red }

+

bh.match('button', function(ctx) { ctx.content('green'); });
bh.match('button_red', function(ctx) { ctx.content('red'); });

= Really red button modifier.

[1999]

@zxqfox I'm not sure about this. Anyway @mishanga will help us.

[mishanga]

Я склоняюсь к тому, что это нормальное поведение: все подходящие шаблоны применяются в том порядке, в каком задекларированы (точнее, в обратном). Это аналогично поведению CSS. На мой взгляд, это понятное и ожидаемое поведение (если опять же проводить аналогию с CSS). Кроме того, BEMHTML работает так же. Срабатывает тот шаблон, который задекларирован последним, независимо от наличия подпредиката про модификатор.

Won't fix.