Я думаю для начала нужно было каждую отдельную страницу делать в *.bundles, а не в отдельном проекте.

Ок, это не проблема перенести. Дальше какие действия нужны, чтобы каждой странице свои стили и скрипты назначить?

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

Отлично, действительно, всё оказалось проще, чем думалось.

Но остался неясным вопрос с подключением общих элементов. К примеру, у меня одинаковая шапка для 10 разных страниц. Мне бы хотелось сущности для неё описать в bemjson ОДИН раз и затем реиспользовать в остальных, а не 10 раз для каждой страницы описывать. Есть какое-то решение для этого?

Возможно, послужит источником идей моя сборка статичного html-проекта из project-stub https://github.com/alexbaumgertner/hunter-boat

Я видел Вашу сборку. По ней могу задать те же вопросы, которые задаю и своей, сделанной в похожем стиле:

• Не напрягало header каждый раз описывать в каждом .bemjson файле в desktop.bundles?
• А что если поменяются адреса ссылок в header? Ходить в каждый .bemjson файл в desktop.bundles и ручками искать эти ссылки в паутине-полотне BEMJSONа чтобы поправить? А если надо будет в шапку доп. элемент добавить? Опять ходить в каждый файл? А как же тогда сама идея реиспользования и автоматизации БЭМ-а?

Tl;Dr: @bonjovi, вам поможет bemhtml.

Если описать содержимое блока не в bemjson страницы, а в самом компоненте (в его bemhtml-шаблоне), то достаточно указать только его имя. Опционально можно указать другие параметры, наличие (или отсутствие) которых будет менять лейаут или содержимое самого блока.

Например, я делаю так: в бандле не пишу bemjson вовсе, только *.bemdecl.js приблизительно с таким содержимым:

exports.blocks = [
  { name: 'root' },
  { name: 'page-index' }
];

Соответсвенно, блок root в common.blocks:

// root.bemhtml.js

block('root').replace()(function() {
  var ctx = this.ctx,
      data = this.data = ctx.data,        // Это всякие служебны переменные,
      meta = data.meta || {},             // которые «прилетаю» из бекенда
      og = meta.og || {},
      bundle = data.bundle || 'desktop';

  if (ctx.context) return ctx.context;

  return {
    block: 'page',
    title: data.title || '#b_',
    favicon: '/favicon.ico',
    styles: [ { elem: 'css', url: '/' + bundle + '/' + data.page + '.min.css' } ],
    scripts: [
      { elem: 'js', url: '/' + bundle + '/' + data.page + '.min.js' }
    ],
    head: [
      { elem: 'meta', attrs: { name: 'viewport', content: 'width=device-width, initial-scale=1' } },
      { elem: 'meta', attrs: { name: 'description', content: meta.description } },
      { elem: 'meta', attrs: { property: 'og:title', content: og.title || data.title } },
      { elem: 'meta', attrs: { property: 'og:url', content: og.url } },
      { elem: 'meta', attrs: { property: 'og:site_name', content: og.siteName } },
      { elem: 'meta', attrs: { property: 'og:locale', content: og.locale || 'ru_RU' } },
      { elem: 'meta', attrs: { property: 'og:type', content: 'website' } }
    ],
    mods: {
      view: data.view
    }
  };
});

Т. е. root просто подменяет себя на page, который выглядит так:

// page.bemhtml.js

block('page')(

  content()( node => {
    return [
      {
        block: 'header',
        mix: { block: node.block, elem: 'header' }
      },
      {
        block: node.data.view // Тут происходит подстановка имени блока, которое «прилетает» из root, а туда — тоже из бэкенда.
      },
      {
        block: 'footer',
        mix: { block: node.block, elem: 'footer' }
      }
    ];
  } )

)

Блок header:

block('header').content()(function() {
  return [
    {
      block: 'logo',
      mix: { block: 'header', elem: 'logo' }
    },
    {
      block: 'logo',
      mods: { title: true },
      mix: { block: 'header', elem: 'title' }
    },
    {
      block: 'nav-menu',
      mix: { block: 'header', elem: 'menu' }
    },
  ];
});

Ну и так далее. Надеюсь, общий смысл понятен.

А еще может помочь CommonJS:

// bundles/page/page.bemjson.js
module.exports = {
  block: 'page',
  content: [
    require('../.bemjson-parts/header')({ title: 'Stranitsa pro chto-to' }),
  ]
};

// bundles/.bemjson-parts/header
module.exports = (opts = {}) => ({
  block: 'header',
  content: [
    { block: 'title', content: opts.title || require('../package.json').name }
  ]
});

@LeonidMalkov7 привет, реклама.