Один или два отдельных блока? Как правильней поступить?

Форум /

Привет! Начал изучать методологию на тестовом проекте. Для начала решил использовать только html/css в терминах БЭМ, чтобы немного освоиться. И сразу возникла проблема с выделением сущностей. Допустим есть такая разметка:

<body class="b-body">
    <canvas class="b-background"></canvas>
    <section class="b-inform-box b-inform-box_rounded">
        <div class="b-inform-box__header">
            <div class="b-background"></div>
        </div>
        <div class="b-inform-box__main"></div>
    </section>
</body>

Если словесно описать, вот что должно получиться:

canvas.b-background - это размытая картинка, которая растянута на весь экран, расположена ниже всех элементов по z-index;
b-inform-box - это просто блок размещенный строго по середине экрана;
div.b-background - это та же картинка, что и рисуется на canvas, но не размытая и растянута на ширину/высоту родителя.;

Визуально это выглядит так: https://www.dropbox.com/s/u0gay77vg5u7hsh/bg.jpg?dl=0

Исходя из описания видно, что, в принципе, блок canvas.b-background и div.b-background это одно и тоже. По крайней мере css описание одно и тоже.:

.b-background {
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Но при дальнейшем подключении JS, встает вопрос, т.к. способы установки изображений на эти блоки разные. На canvas я рисую размытое изображение, а на div я устанавливаю css свойство background-image. Т.е., грубо говоря, различие блоков только в JS методе draw().

Нужно как-то эти два блока разделить, например на: b-page-bg и b-inform-box-bg? Или использовать один b-background, но как тогда организовать различный для обоих блоков js код?

Многовато написал, но хотел подробнее все расписать. Надеюсь что все понятно, и вы мне поможете разобраться. Хочу освоить БЭМ ^^

9 years ago

apsavin

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

9 years ago

alexbaumgertner

http://ru.bem.info/technology/i-bem/2.3.0/i-bem-js/#Описание-блока-в-декларации

// background-image/background-image_type_blur.js
DOM.decl({ block: 'background-image', modName: 'type', modVal: 'blur' },
    { /* методы экземпляра */ },
    { /* статические методы */ }
);

// background-image/background-image_type_fill.js
DOM.decl({ block: 'background-image', modName: 'type', modVal: 'fill' },
    { /* методы экземпляра */ },
    { /* статические методы */ }
);

Не забудте в шаблоне указать разную html-реализацию блока, например (проверьте, в шаблоне могу ошибаться):

block('background-image')(
    mod('type', 'blur')(tag()('canvas')),
    mod('type', 'fill')(tag()('div'))
)

9 years ago

tadatuta

@alexbaumgertner, все верно, разве что явно задавать div не имеет смысла, т.к. это значение по умолчанию

9 years ago

kuflash

@alexbaumgertner, спасибо огромное за разъяснение. Моя проблема в том, что не дошел до изучения i-bem.js :) Думал оставить это на потом. Но теперь пойду сразу штудировать и внедрять. Еще раз спасибо!

9 years ago

alexbaumgertner

@kuflash весь огонь БЭМа – в связке bemjson + (BH/BEMHTML-шаблонизация) + i-bem :)

Удачи вам и welcome aboard!

Будем рады ответить на вопросы :)

Чтобы оставлять комментарии, необходимо авторизоваться.