Как устроена серверная сторона БЭМа, как с рендерингом на сервере, с ruby, какие трудности при развертывании? Я вот сейчас общаюсь и мне приводят аргумент, что это еще и лишний гемор на сервере с js и нагрузку на сервер увеличивает, что приводит к удоражанию.

Можете показать сайты которые полностью на стеке БЭМа. НЕ ЯНДЕКС, а то при слове БЭМ у всех Яндекс, много датацентров, много бабок на сервера и тп.

gulp-pugbem

NPM GitHub

Установка

npm install gulp-pugbem --save-dev

Подключение

var gulp = require('gulp');
var pug = require('gulp-pug');
var pugbem = require('gulp-pugbem');

gulp.task('pages', function () {
    return gulp.src('app/**/*.pug')
        .pipe(pug({
            plugins: [pugbem]
        }))
        .pipe(gulp.dest('dist'));
});

Использование

Блок

блок в pug-коде начинается с точки [перед которой может стоять название тега] блоки можно вкладывать друг в друга, как показано во втором примере

.header
form.search-form

.header
    nav.menu

result:

<div class="header"></div>
<form class="search-form"></form>

<div class="header">
    <nav class="menu"></nav>

---

Элемент

элемент в pug-коде начинается с точки и знака подчеркивания [перед которыми может стоять название тега] в примере ниже, блок search-form включает два элемента input и button

form.search-form
    input._input
    button._button Search

result:

<form class="search-form">
    <input class="search-form__input">
    <button class="search-form__button">Search</button>
</form>

---

Модификатор

модификатор в pug-коде начинается с точки и дефиса [перед которыми должен идти блок или элемент] в примере ниже, модификатор назначен блоку search-form и элементу button

Булевый

form.search-form.-focused
    button._button.-disabled Search

result:

<form class="search-form search-form--focused">
    <button class="search-form__button search-form__button--disabled">Search</button>
</form>

Ключ-значение

form.search-form.-theme_islands
    button._button.-size_m Search

result:

<form class="search-form search-form--theme_islands">
    <button class="search-form__button search-form__button--size_m">Search</button>
</form>

---

Микс

микс в pug-коде состоит из блока и следующего за ним одноименного элемента без названия тега [перед элементом не может идти ничего, кроме одноименного блока]

миксы не могут использоваться сами по себе, они являются строительной частью другого блока в примере ниже, блок header включает микс search-form

.header
    form.search-form._search-form

result:

<div class="header">
    <form class="search-form header__search-form"></form>
</div>

---

Пример

header.header
    nav.menu
        a(href="#")._logo Company
        .list
            a._item.-active(href="#") Home
            a._item(href="#") News
            a._item(href="#") Gallery
            a._item(href="#") Partners
            a._item(href="#") About
            a._item(href="#") Contacts
    h1._title Hello, World!
    .myslider._myslider
        ._slide Content
        ._slide.-active Content
        ._slide Content
    p._text Good weather

result:

<header class="header">
    <nav class="menu">
        <a class="menu__logo" href="#">Company</a>
        <div class="list">
            <a class="list__item list__item--active" href="#">Home</a>
            <a class="list__item" href="#">News</a>
            <a class="list__item" href="#">Gallery</a>
            <a class="list__item" href="#">Partners</a>
            <a class="list__item" href="#">About</a>
            <a class="list__item" href="#">Contacts</a>
        </div>
    </nav>
    <h1 class="header__title">Hello, World!</h1>
    <div class="myslider header__myslider">
        <div class="myslider__slide">Content</div>
        <div class="myslider__slide myslider__slide--active">Content</div>
        <div class="myslider__slide">Content</div>
    </div>
    <p class="header__text">Good weather</p>
</header>

Параметры

var pugbem = require('gulp-pugbem');

// разделитель элементов
pugbem.e = 'string';

// разделитель модификаторов
pugbem.m = 'string';

Пример

pugbem.e = '**';

form.search-form
    input._input

result:

<form class="search-form">
    <input class="search-form**input">
</form>

---

pugbem.m = '++';

form.search-form.-focused

result:

<form class="search-form search-form++focused"></form>

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

Имя модификатора отделяется от имени блока или элемента одним подчеркиванием (_)

Тогда необходимо задать свойству m соответствующее значение:

pugbem.m = '_';

form.search-form.-focused

result:

<form class="search-form search-form_focused"></form>

License

MIT License

Copyright (c) 2017 Legostaev Vadim (legostaev.vadim@mail.ru)

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Ситуация такая: использую borschik-js-include для подтянивания файлов из node_modules. Бандлы собираются - тесты (specs) не собираются. Пробовал решить ситуацию кардинально и заиспользовал browserify но столкнулся с той же самой проблемой.

Добрый вечер

Пытаюсь вывести данные из JSON, как сказано здесь - https://ru.bem.info/forum/716/

Ничего не выходит, помогите найти ошибку

Вывожу вот так - http://joxi.ru/V2VL9x3SxLX34r

Выдаёт ошибку TypeError: Cannot read property 'apply' of undefined http://joxi.ru/1A5xBqGsnO6Nd2

В переменную BEMTREE почему-то ничего не приходит.

Проверил в вышеобозначенном файле page.bemtree.js через console.log() значения этих четырёх переменных:

• PATH
• pathToBundle
• BEMTREE
• BEMHTML

Все имеют значение, кроме BEMTREE имеющей undefined

Сборку свою текущую загрузил сюда - https://yadi.sk/d/6WCDVmYN3MqEBL

Не могу разобраться по описанию в разделе Декларация блока, как примешивать блок (отдельный специально подготовленный миксин?) к элементу или модификатору. Ткните меня, пож., в примеры использования declMixin? В bem-core, bem-components что-то не вижу ничего.

Привет!

Наверняка все знают про шаблонный репозиторий для динамических проектов bem-express.

Если вы еще до конца не разобрались, как внутри него все устроено, то для вас мы написали tutorial: «Переходим на сторону сервера с bem-express».

Добрый день

По умолчанию project stub стили для /desktop.bundles/index/index.bemjson.js ищет в папках /common.blocks и /desktop.blocks

Как сделать так, чтобы он искал например только в /desktop.blocks/index

Мне нужно чтобы стили для /desktop.bundles/index/index.bemjson.js искались в /desktop.blocks/index А для /desktop.bundles/index2/index2.bemjson.js искались в в /desktop.blocks/index2

Что-то я сломался на этом месте.

Вот есть у меня, скажем, блок input из bem-components. К нему примиксован элемент моего блока. Скажем, my-block__control.

{
    block: 'input',
    mix: { block: 'my-block', elem: 'control }
}

Из my-block легко получить этот input: const input = this.findChildElem('control').findMixedBlock(Input).

Но можно ли аналогичным образом теперь из input получить элемент control? Например, input'ов много, я вешаю обработчик onchange на них, и этот обработчик должен взаимодействовать с миксованным элементом control. Каким-то из методов поиска можно к нему обратиться? Хочется что-то вроде такого: input.findMixed*({ block: 'my-block', elem: 'control' })

Или только заранее формировать соответствия блоков и элементов и по ним уже ориентироваться?

Есть примерно следующая структура вложенных блоков:

{
    block : 'box',
    mods : {
        root : true,
        id : 'layoutBox',
    },
    content : {
        block : 'box',
        mods : {
            id : 'appBox',
        },
        // Имеем некоторую вложенность блоков `box`: layoutBox->appBox->ReportLayout->Report->ReportDisplay; Т.е.:
        // ...
        content : {
            block : 'ReportDisplay',
            mix : {
                block : 'box',
                mods : {
                    id : 'ReportDisplay',
                },
            },
            content : {
                // Some content...
            },
        },
    },
}

При удалении блока ReportDisplay (при помощи BEMDOM.destruct(ReportDisplay.domElem)) по цепочке parentNode (в jquery) до верхнего уровня (layoutBox) всплывает событие на delMod('js'), в результате чего блок отписывается от событий, зарегистрированных на window (ранее подписываемся так: this._domEvents(BEMDOM.win).on('resize',...)).

Стек выглядит примерно так:

    (i-bem-dom__events.js:155) this._storage[e] = null; // e='resize' -- Это собственно удаление подписанного события в _unbindByEvent.
    // ...
    (i-bem-dom__events.js:139) objects.each(this._storage, this._unbindByEvent, this); // this._storage={resize:{uniq161:{...}}}
    (i-bem-dom__events.js:253) params.bindToArbitraryDomElem && ctxStorage[storageKey] &&
                            ctxStorage[storageKey].un();
    (i-bem-dom__events_type_bem.js:85) fn.call(fnCtx || instance, originalEvent, data); // fnCtx=null, instance=layoutBox, originalEvent={bemTarget:ctx,data:undefined,target:ctx,type:'modchange'_isDefaultPrevented:false_isPropagationStopped:false}, data={modName:'js', modVal:'',oldModVal:'inited'}
    (jquery:5205) ret = ( ( jQuery.event.special[ handleObj.origType ] || {} ).handle ||     //  handleObj.origType='__bem__box_js_'
                        handleObj.handler ).apply( matched.elem, args ); //  matched.elem=layoutBox.domElem[0], args=[jQuery.Event{type:'__bem__box_js_'},{modName:'js', modVal:'',oldModVal:'inited'},{fns:{uniq151:true},propagationStoppedDomNode:null},{bemTarget:ctx,data:undefined,target:ctx,type:'modchange'_isDefaultPrevented:false_isPropagationStopped:false}]
    (jquery.js:5014) jQuery.event.dispatch.apply( elem, arguments ); // elem=layoutBox.domElem[0], ...
    (jquery:8201) handle.apply( cur, data ); // cur=layoutBox.domElem[0], data=[jQuery.Event{type:'__bem__box_js_'},{modName:'js', modVal:'',oldModVal:'inited'},{fns:{uniq151:true},propagationStoppedDomNode:null},{bemTarget:ctx,data:undefined,target:ctx,type:'modchange'_isDefaultPrevented:false_isPropagationStopped:false}]
    (jquery.js:8262) jQuery.event.trigger(type, data, this); // type='__bem__box_js_', data=[{modName:'js', modVal:'',oldModVal:'inited'},{fns:{uniq151:true},propagationStoppedDomNode:null},{bemTarget:ctx,data:undefined,target:ctx,type:'modchange'_isDefaultPrevented:false_isPropagationStopped:false}], this=ctx
    (jquery.js:8269) ctx.domElem.trigger(event, [data, { fns : {}, propagationStoppedDomNode : null }, originalEvent]); // event='__bem__box_js_', data={modName:'js',modVal:'',oldModVal:'inited'}, originalEvent:{bemTarget:ctx,data:undefined,target:ctx,type:'modchange'_isDefaultPrevented:false_isPropagationStopped:false}
    // ...
    (i-bem-dom.js:676) bemEvents.emit(this, e, data); // e={modName:'js',modVal:''}, data={modName:'js', modVal:'',oldModVal:'inited'}
    (i-bem-dom.js:733) this._emit({ modName : 'js', modVal : '' }, eventData); // eventData={modName:'js',modVal:'',oldModVal:'inited'}
    (i-bem.vanilla.js:324) this._afterSetMod('js', '', 'inited');
    (i-bem.vanilla.js:382) this.setMod('js', '');
    (i-bem.vanilla.js:247) this.delMod('js');
    (i-bem-dom.js:244) entity._delInitedMod();
    (i-bem-dom.js:1004) removeDomNodeFromEntity(entity, domNode);
    // ...
    (i-bem-dom.js:1029) this._destruct(ctx, excludeSelf, true);
    BEMDOM.destruct(ReportDisplay.domElem);

Полностью слепок вершины стека из DevTools, от destruct до _unbindByEvent).

_unbindByEvent (i-bem-dom__events.js:155)
each (objects.vanilla.js:56)
un (i-bem-dom__events.js:139)
(anonymous) (i-bem-dom__events.js:254)
inherit._createEventManager (i-bem-dom__events_type_bem.js:85)
dispatch (jquery.js:5206)
jQuery.event.add.elemData.handle (jquery.js:5014)
trigger (jquery.js:8201)
(anonymous) (jquery.js:8269)
each (jquery.js:362)
each (jquery.js:157)
trigger (jquery.js:8268)
emit (i-bem-dom__events_type_bem.js:119)
_emit (i-bem-dom.js:676)
_afterSetMod (i-bem-dom.js:733)
setMod (i-bem.vanilla.js:324)
delMod (i-bem.vanilla.js:382)
_delInitedMod (i-bem.vanilla.js:247)
removeDomNodeFromEntity (i-bem-dom.js:244)
(anonymous) (i-bem-dom.js:1004)
each (objects.vanilla.js:56)
(anonymous) (i-bem-dom.js:1000)
each (jquery.js:362)
each (jquery.js:157)
_destruct (i-bem-dom.js:993)
destruct (i-bem-dom.js:1029)

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

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

Хелп? Что это может быть?

Версии библиотек:

• bem-core@4.2.1
• jquery@3.2.1

Добрый день!

Заметил следующее поведение bem-components на TOUCH-PAD и TOUCH-PHONE-устройствах: блоки (select, button, radio-group и т.д) срабатывают только при повторном нажатии (tap). После первичной инициализации конкретного блока проблема исчезает, срабатывает сразу. Подобное поведение наблюдалось на планшете iPad и двух Android-телефонах. Заметил сначала в проекте, потом проверил тут: bem-components / 6.0.0, описанное поведение воспроизвелось.

Подскажите, пожалуйста как побороть. Не хотелось бы отказываться от ленивой инициализации.

Имеется select с количеством пунктов ~ 100 и при указании optionsMaxHeight он прекрасно работает до тех пор, пока не зайти с телефона. С телефона select продолжает раскрываться во всю высоту, что очень уж неудобно. Причем если в моб.браузере поставить настройку "Полная версия сайта", то select начинает работать правильно. В чем может быть проблема?

Добрый вечер

Использую project stub

Ранее всю разметку писал в index.bemjson.js, сейчас же решил оставить там основную разметку, а контент и шаблонизацию вынести для каждого блока в bemhtml/bemtree в common.blocks

И, вроде бы, всё почти сложилось, сами сущности расширяются, в итоговом html в браузере я вижу все блоки, которые должны были сформироваться. Но вот стили применились только к элементам, описанным в bemjson. А блоки, описанные через bemtree оказались проигнорированы в контексте css

Я вычистил из проекта лишнее и залил сюда - https://yadi.sk/d/NeU8Hc033MSDX2

Помогите плиз разобраться в чём дело, почему не применяются стили к topmenu__wrapper?

Доброго времени суток. Я в беме новичек, но заметил одну характерную черту bem библиотек - они жестко связаны. Пример: bem-mvc. Я понимаю, что библиотека разработана в контексте bem, но допустим мне понравилась реализация моделей и я хочу использовать модели и только, но судя по всему такой возможности нет - потому что имеет жесткую зависимость от bem-core. Ожидание:

import {createModel} from 'bem-mvc';
const User = createModel({ /* config */ });
// I can use model User without bem, or with it
BEM.registerModel('User', User);
// or
BEM.registerModel('User', createModel({ /* ... */ }));

Реальность:

BEM.MODEL.decl({ /*...*/ });

Плюсы от уменьшения связности мне кажутся очевидными. Это: изоляция функциональности, упрощение тестирования, возможность использования моделей в проектах без bem-core, что на самом деле хорошо, потому что инструмент самодостаточен и может использоваться большим количеством людей, которым не нужны лишние зависимости.

Это лишь мое мнение. Извините, если все на самом деле не так.

Всем привет!

Пытаюсь написать примитивный тест на встраивание компонента. Использую Jest. Выглядит он примерно так:

import React from 'react';
import ReactDOM from 'react-dom';
import Button from 'b:Button';

it('renders without crashing', () => {
  const div = document.createElement('div');
  ReactDOM.render(<Button />, div);
});

Файл .babelrc

{
  "presets": [
    ["es2015"],
    "stage-1",
    "react"
  ],
  "env": {
    "test": {
      "plugins": [
        ["bem-import", {
          "techs": ["js"]
        }]
      ]
    }
  }
}

Файл .bemrc

module.exports = {
  root: true,
  levels: {
    'blocks': {
      scheme: 'nested',
      shemeOptions: 'react',
      naming: 'react'
    },
    'node_modules/@myBem/typography/blocks': {
      scheme: 'nested',
      shemeOptions: 'react',
      naming: 'react'
    },
    'node_modules/@myBem/icons/blocks': {
      scheme: 'nested',
      shemeOptions: 'react',
      naming: 'react'
    }
  }
}

Запуская тест командой npm test я получаю ошибку

FAIL  blocks/Button/Button.test.js
  ● Test suite failed to run

    Cannot find module 'm:paragraph' from 'Text.js'

      at Resolver.resolveModule (node_modules/jest-resolve/build/index.js:179:17)
      at Object.<anonymous> (node_modules/@myBem/typography/blocks/Text/Text.js:4:1)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        2.129s, estimated 3s

Дело в том что блок Button внутри себя делает import другого блока Text из node_modules/@myBem, который в свою очередь делает import модификатора paragraph. И вот тут у меня ощущение что модуль bem-import не заходит так глубого во вложенности блоков. Что мне делать в данном случае или может можно как-то по другому решить проблему? Ударяюсь лбом о стену уже второй день =(

Спасибо!

Добрый день Разрабатываю на project stub относительно большой проект (вёрстка):

• несколько страниц
• все страницы разные в контексте блоков, общие только шапка и подвал
• на разных страницах свои особенные скрипты, которых нет на других страницах
• разрабатывал страницы отдельно на отдельно взятых project stub заготовках
• css блоков и bemhtml для каждой страницы клал в common.blocks

Теперь нужно всё это (все странички из разных project stub заготовок) собрать воедино, но пока не пойму как. Мне нужна примерно следующая картина в файловой структуре: common.blocks -- common ---- header ------ header.css ------ header.bemhtml.js ---- footer -- catalog ---- filter ---- heading -- index -- contacts desktop.bundles -- index -- catalog ---- catalog.html ---- catalog.bemjson.js ---- catalog.min.css ---- ... -- contacts

Как это реализовать? Где указать условия каким блокам со стилями из каких каталогов в какую страничку подгружаться? Потому что если я сейчас из разных заготовок стили солью в одну папку, у меня к каждой странице будут подгружаться все стили. Т.е. в contacts будет попадать что предназначалось для catalog и т.д.

Привет!

Не знаешь, чем заняться в выходные в августе? Вот тебе подборка полезных видюшек про БЭМ:

• Про шаблонизацию
• Про декларативный JavaScript
• Про i-bem
• Про bem-components
• Про сборку
• Про сборку на основе деклараций с уровнями переопределения
• Про сборку проекта с помощью Gulp
• Про БЭМ на практике: в гостях у Loftblog

Найти все прошедшие вебинары можно по тегу webinar. А все новые видео будут появляться в канале bem.info на YouTube. Подписыватесь!

Stay BEMed!

хочу покрутить с целью принять решение, внедрять или не внедрять. По сборке я правильно понимаю что: Уровни переопределения - это всегда энтрипоинты вебпака? Модификаторы - возможно сделать как чанки вебпака и подгружать асинхронно (будет ли выделено как чанки если сложить там только css вроде темизации)? Переводы - куда упадут собранные по всем сорцам переводы, в энтри или в чанк? Как не пересобирая выебпак перевести на все языки да еще и в разных уровнях переопределения? Где взять пример накрученных переводов (обычные ключи, параметризированные, множественные)?

15 сентября в Екатеринбурге состоится очередная встреча БЭМ-сообщества — BEMup!

Мы ждем вас в уютном офисе Яндекса, где Сергей Бережной проведет мастер-класс по использованию bem-react-core — библиотеки, расширяющей возможности React.

Если вам близка идея БЭМ, приходите! Будем говорить про БЭМ, React и фронтенд в целом.

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

Регистрация открыта!

Stay BEMed!

PS: По традиции вы можете задать вопросы заранее в комментариях к этому посту, а мы постараемся подробно ответить на них во время митапа.

Кажется должно быть немного быстрей чем собирать строку а потом ее вставлять в dom.

Но даже если не будет прироста в скорости, почему бы не сделать, интересно же.

Пока не сел кодить, хотел бы спросить знатоков, есть ли какие то очевидные препятствия реализации?

Добрый день. У меня проблема. Пока читаешь "Быстрый старт" все здорово все красиво, как только начинаешь делать не складывается. Очень сильно интересуют блоки.

Блок не должен влиять на свое окружение, т. е. блоку не следует задавать внешнюю геометрию (в виде отступов, границ, влияющих на размеры) и позиционирование. Т.е. я не имею права пользоваться такими вещами для блока как margin, padding, border, position, float и т.д.???

Каким образом тогда их так просто и красиво меняют местами в примерах? https://ru.bem.info/methodology/key-concepts/

раздел "Свободное перемещение".

Дают красивый пример с блоком Head block внутри которого очень легко и не принужденно двигают еще 3 блока logo, search, auth. "Так, например, логотип и форму авторизации можно поменять местами. При этом вносить изменения в CSS или JavaScript-код блока не нужно." - сказано в примере.

Но с точки зрения HTML мы имеем слеющий код

<div class="headblock">
    <div class="logoblock"></div>
    <div class="searchblock"></div>
    <div class="authblock"></div>
</div>

(все отлично, все красиво. Мы имеем блок в который вложены другие блоки)

А с точки зрения CSS у них как минимум у всех будут значения float а это уже противоречит методологии БЭМ, и для других проектов мы эти блоки использовать не сможем, потому что они потребуют редактирование CSS.

Как быть?

Собственно вопрос в заголовке.