Как правильно указывать пути для уровней — levels в БЭМ?

Question

[avprinciple]

Есть две папки common и pages, которые расположены по пути - src/blocks/modules/

Набираю команду bem create anyBlock -l level1 - хочу чтобы выплёвывало по пути 'src/blocks/modules/common', сейчас кидает в корень проекта.

Для примера:

module.exports = {
 root: true,
 levels: [
  { path: 'src/blocks/modules/common' },
  { path: 'src/blocks/modules/pages' }
 ],
  modules: {
      "bem-tools": {
          plugins: {
              create: {
                  techs: ["html", "scss", "js"],
                  levels: {
                    level1: {
                      techs: ['js']
                    },
                    level2: {
                      techs: ['html']
                    }
                  }
              }
          }
      }
  }
};

Answer 1

[Realetive]

Нужно создать файл .bemrc в корне проекта (откуда запускается команда bem create), например:

module.exports = {
  levels: {
    "components/common.blocks": { default: true },
    "components/desktop.blocks": {},
    "design/common.blocks": {},
    "design/desktop.blocks": {},
  },
  libs: {
    "node_modules/bem-core/common.blocks": {},
    "node_modules/bem-core/desktop.blocks": {},
    "node_modules/bem-components/common.blocks": {},
    "node_modules/bem-components/desktop.blocks": {},
  },
  modules: {
   "bem-tools": {
      plugins: {
        create: {
          techs: [ "post.css", "browser.js", "bemtree.js", "bemhtml.js", "deps.js", "md" ],
          templateFolder: ".bem/templates",
          levels: {
            "components/common.blocks": {
              default: true,
              techs: [ "browser.js", "bemtree.js", "bemhtml.js", "deps.js", "md" ]
            },
            "design/common.blocks": {
              techs: [ "post.css", "deps.js" ]
            },
            "design/desktop.blocks": {},
          },
        }
      }
    },
  }
}

Comments

[avprinciple]

В моём вопросе видно, что у меня есть .bemrc, и он в корне проекта, и запуская bem create, у меня всё создаётся, но только в корне проекта, поэтому и спрашиваю - как указывать правильно пути, потому что проблема именно в них.

Запускаю команды:
bem create anyBlock -l level1
bem create anyBlock -l level2

как мне для level1 и level2 - указать разные пути к папкам?

[Realetive]

level1 должен быть путём до этого уровня, т. е. тогда должно быть так: bem create anyBlock -l src/blocks/modules/common.

[avprinciple]

Realetive, хм, то есть мне каждый раз полностью путь прописывать надо? Или как-то забиндить можно?

[Realetive]

avprinciple, наверное, с помощью стандартных алиасов. Сам так не делал, сейчас попробую…

[Realetive]

avprinciple, не, не получилось. Но как минимум я всегда использовал автокомплит по Tab для построения пути, так что особого труда не вызывало ¯\_(ツ)_/¯

[avprinciple]

Realetive, да, можно) Но странно, я думал это уже изначально сделали - то, что я хочу) Ну, например, как с первым путём, где мы указываем "default", и bem автоматом туда кидает, после команды bem create anyBlock. Ок, будем юзать так)
А в levels мы просто описываем какие технологии и т.п. нужно в той или иной папке создавать?

[avprinciple]

Realetive, а как подружиться с двойным подчёркиванием? __block
Выдаёт ошибку AssertionError [ERR_ASSERTION]: Required `entity` field

npm install --save @bem/naming - это работает только при использовании bem инструментов, через терминал никак?

[Realetive]

avprinciple,

А в levels мы просто описываем какие технологии и т. п. нужно в той или иной папке создавать?

— Да, но bem create умеет выделять технологии из расширения файлов, например:

bem create test.{bemtree, deps}.js -l src/blocks/modules/common

создаст два файла: test.bemtree.js и test.deps.js в указанном каталоге по шаблону, не смотря на то, что написано в .bemrc. Я, собственно, именно этот способ всегда и использую, не полагаясь на конфигурацию по умолчанию.

как подружиться с двойным подчёркиванием?

— Вот тут не понял. По методологии названия сущностей (файлов, каталогов) не может начинаться с __.

[avprinciple]

Realetive,


Я думал так можно)

[Realetive]

avprinciple, А, это… Пардон, да, ты прав. bem create создаст их автоматически:

bem create test__element.{bemtree, deps}.js -l src/blocks/modules/common

создаст test__element.bemtree.js и test__element.deps.js в каталоге src/blocks/modules/common/test/__element.

[avprinciple]

Realetive, да, спасибо!

[avprinciple]

Realetive,
Приветствую) Подскажи как работают с общими блоками из папки common


Есть папка "common", там папка menu с файлами menu.html, menu.scss, menu.js
Есть папка pages, в ней папка-страницы - catalog, и я хочу сюда взять menu из общей папки - common, но что-то добавить/удалить/изменить

Как это правильно делать? Используется Gulp+Webpack, просто брать и копировать папку menu из общей (common) и вставлять в папку pages/catalog и редактировать на своё усмотрение

Всё норм, можно, но если menu общее изменилось, мы его поменяли в папке "common", то эти изменения не коснуться в pages/... ведь там свои локальные/скопированные папки menu из "common"

[Realetive]

avprinciple, через модификатор.

[avprinciple]

Realetive,
Я имел в виду, что мне нужно инклудить блоки куда-либо, я могу инклудить с папки common, но если у меня menu слегка другое, мне приходится копипастить папку menu без scss из common, ставить её в pages/catalog/__menu, например, и там я меняю html через модификаторы, и инклуд у меня по этому пути "pages/catalog/__menu"

Но если в прекрасный день у меня меню меняется на всём сайте/редизайн, я меняю его в общей (common) папке, то у меня эти изменения не коснутся на тех страницах/местах, где есть скопированное (и уже отредактированное через модификаторы)

Пример:

В общей

consulstaff/src/blocks/modules/common/card/

Я скопипастил из общей, через модификаторы изменил под эту страницу

consulstaff/src/blocks/modules/pages/news/card/

<article class="card page-news__card">
  <div class="card__date">
    8 Октября
    <span class="card__date-years">2019</span>
  </div>
  <picture class="card__picture page-news__card-picture">
    <img class="card__image page-news__card-image" src="img/news-advert.jpg" alt="Card">
  </picture>
   ...

Include, подключаю скопированный/отредактированный блок

<div class="page-news__cards">
      @@include('card/card.html')

а не из common @@include('../../common/card/card.html')

Как в таких случаях быть? Как вы это делаете/как правильно это делать?
Если на 10 страницах 10 блоков-card скопировано и отредактировано через моды, и инклудятся они из pages/any-page, а не common. И вдруг меняется/редактируется блок-card в "common", я хочу чтобы эти изменения были везде, где этот блок фигурирует, а так мне придётся вручную в каждой странице этот блок редактировать

[Realetive]

avprinciple, проблема в шаблонизаторе, как мне кажется — он не позволяет создать нормальные реиспользуемые компоненты, отсюда все эти «костыли» с копированием и дублированием. Правильный способ — иметь минимальный работоспособный общий блок menu, который ни при каких обстоятельствах не надо как-то менять (все изменения делаются в модификаторе).

[avprinciple]

Realetive, а как вы это делаете? Вы используете весь стек инструментов бэм?

[Realetive]

avprinciple, да.

[Realetive]

avprinciple, собственно, я с Pug на него (XJST: BEMHTML, BEMTREE) перешёл лет 5 назад, когда мои Pug-шаблоны стали похожи на какую-то ебанину и кошмар авангардизма из-за попыток превратить их шаблонизатор во что-то более-менее декларативное.

[avprinciple]

Realetive, Ясно, будем искать туториалы, учиться. Думал, что можно как-то иначе)
Спасибо

[Realetive]

avprinciple, может, и можно. Но я таких способов не знаю. Старый стек больше не развивается, так что советую смотреть в сторону современных компонентных бибилотек. Для React, например, есть bem-react от авторов БЭМа. Причём сам Реакт можно действительно использовать только лишь как шаблонизатор.

[Константин]

avprinciple, наверное это уже не актуально, но оказалось, что если немного поправить модуль (node_modules\bem-tools-create\lib\create.js), то возможно создавать модули по алиасам, не прописывая путь постоянно.