.page__header

.page_type_about .page__header

те нужно дополнительно обернуть все в див .page или же задать его для body?
и это
.page_type_about .page__header
мне не пригодится если на всех страница хэдэр будет одинаковым и иметь одинаковое внешнее позиционирование те отступ снизу?
ну и этот .about, .home не пригодятся тк у меня они сами по себе выглядят как и все странициы, для меня главное просто правильно хэдэр описать сам, а то я и придумал эти разбиения на страницы для этого

Можно задать для body

но у меня же идет так
body
 .root
   .app
я использую реакт и вставляю мое приложение в корневой элемент,
а может тогда лучше не создавать отдельный .page
body
 .root
   .app
     .page
       .header
а сделать в стиллях хэадер как элемент .app, если его нудно спощиуионировать типа
.app__header или же все же сделать доп обёртку?

.app и .page могут быть одной нодой, ну или использовать только .app (или назвать его .page)

Вариантов много, используйте тот, что нравится

а вот что насчёт именования в js, например, тех де переменных
вот допустим мне нудно получить какой-то элемент .app__header
какой синтакис использовать, ведь я не тире не могу использовать, как я видел по React синтаксисе
а по идее же правильным будет везде один и тот же синтаксис использовать.
как поступить с именованием переменных и т д?

А в чем проблема, почему не можете?

Как хотите, так и именуете классы, хоть тире хоть че

Не стоит мешать. В js используем camelCase

изначально, мы придумывали именование в «классической традиции», но позже учли как раз то, что js тоже хочется писать и «венцом эволюции» я считаю схему https://ru.bem.info/methodology/naming-convention/#%D1%81%D1%82%D0%B8%D0%BB%D1%8C-react

так я видел это, но я же не могу написать вот так, например

function BlockName-ElemName ({ some }) {
 // ...
 return node
}

тк нельзя использовать тире в названиях

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

прикол в том, что т. к. элементы обычно существуют в контексте блока, то зачастую достаточно только имени элемента (без блока с разделителем перед)

в смысли, элементы же всегда существует в контексте блока или вы о чем?

а так
если у меня есть какой-то там

блок logo
и
блок block, а в нем свой элемент logo, который существует только в его контексте
block__logo то мне нужно будет

function Logo () { // ... }

function Block () {
 // ...
 node.append(Block-Logo())
 return node
}

то я уже не смогу назвать этот логотип блока Block как Logo и Block-Logo не согу тк тире не могу то же

или же скорее всего мне не придется отдельно генерить block__logo, а скорее всего я буду это делать в Block?

Секрет в том, что не надо смешивать контексты Logo и Block.

в смысле? я имею ввиду что лого это отдельный блок
и Block тоже
а block__logo
то протсо элемент вообще никакого отношения не имеющий к блоку Logo
те тут мне важно показать в коде js что это именно элемент

мне все говорят что это все что я делаю, так не надо и я вообще не о том, но я никак не пойму, если это так то почему?

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