Как по БЭМ правильно прописать классы в данном случае?

Shimpanze, всегда пожалуйста :-)

Как по БЭМ правильно прописать классы в данном случае?

Shimpanze, потому что это модификатор для блока grid.

https://ru.bem.info/methodology/quick-start/#%D0%B...
Модификатор со значением для элемента:
block__elem_mod_mod-value
Модификатор со значением для блока:
block_mod_mod-value

Итого получаем:
Блок: grid
Имя модификатора: type
Значение модификатора: posters

То есть _ тут не для раздела слов в названии модификатора. А разделение разных частей модификатора.

Как Кинопоиск делает черный квадрат в захвате экрана?

Jebati, ага, да, зависит от фильма, видимо. Тут воспроизвелось. Если что накопаю - напишу.

Как Кинопоиск делает черный квадрат в захвате экрана?

Но как они это делают именно в обычном браузере Chrome на ПК

А можно сценарий воспроизведения? Только что сделал спокойно скриншот как сторонним софтом, так и стандартным print screen windows

Как по БЭМ правильно прописать классы в данном случае?

Shimpanze,

banner-1, banner-2 [, banner-n] нужна для быстрого поиска этого элемента через JS.

Ну тут сходу 2 альтернативных варианта:
1) Найти сразу все, а потом просто извлекать по индексу?
2) Делать нумерацию не в CSS а в data-атрибутах. например <div class="poster" data-index="1"> Статья по теме: https://learn.javascript.ru/dom-attributes-and-pro...
Ибо делать нумерацию в классах просто чтобы найти с помощью js - ок конечно, но практика сомнительная и явно не по бэму.

так как идентификатору "grid" придётся добавлять сущность

В этом и суть. У Вас максимально абстрактные правила для блока grid.
например:

.grid {
  display: grid;
}

И если Вы видите что сетки у Вас повторяются, то дальше выделить вариации и описать эти вариации через модификаторы. То есть в модификаторах будет определено сколько колонок, какие, какой отступ. Но это если в абсолют конечно куда-то уходить.
Суть вопроса к posters-grid в том, что Вы чётко говорите, что это сетка для постеров, при этом у Вас может быть точно такая же сетка не для постеров. Значит имя блока было определено не корректно. Слишком узко.
Суть вопроса к комбинации блоков .grid и .posters-grid на одном html элементе в том, что если posters-grid уточняет или переопределяет реализацию .grid, то скорее это не отдельный блок, а модификатор блока. И тогда по БЭМу, на мой взгляд, было бы корректнее как я предложил выше - <div class="grid grid_type_posters">

Как убрать белую полоску внизу экрана на сайте в мобильной версии?

leham1, при скрытии браузерных панелек ещё, насколько я помню, срабатывает событие resize. Можно попробовать к нему прицепиться и сделать какую то обработку. Например, вызвать перерисовку страницы или что-нибудь типа того чтобы картинка фоновая обновилась. Но это нужно делать осторожно.

Как убрать белую полоску внизу экрана на сайте в мобильной версии?

leham1, Да нет, не банальная. Это поведение браузера. Так решили разработчики операционной системы и браузера. Не на всё нам дают возможность повлиять.

Но спасибо конечно apple..

Как по БЭМ правильно прописать классы в данном случае?

Shimpanze, БЭМ про выделение повторяющихся блоков в разметке для их переиспользования. Ну не только про это, но остановимся на этом.

Выделение такого блока как posters-grid возможно, но наделяет его смыслом. Что это сетка для постеров. Я не знаю что Вы делаете. возможно, у Вас на сайте полно блоков с сеткой для постеров и тогда это может иметь смысл. Однако, компонент сетки, как правило, не должен знать о том, что он содержит. Поэтому мы и выделяем просто блок grid, на который дальше уже можно накидывать модификаторы, уточняющие\переопределяющие его CSS реализацию.

Разве я не должен, согласно БЭМ, не плодить классы в элементе

Не уверен что мы с Вами сейчас будем про одно и то же, но БЭМ, к сожалению, про многословность. Это одна из притензий к БЭМу. Плодить лишнего, конечно же, не надо.

В CSS-файле проще написать

Так БЭМ не для того, чтобы Вам было проще писать в CSS файле. Иногда нужно писать сложнее, но один раз, а не проще, но повторяться или увеличивать связность кода. Ну и в целом, не понятно зачем Вам селектор вида .posters-grid . poster ну или замещающий его

posters-grid__poster

. Вы не ответили на вопрос выше. Даже если следовать БЭМу, то на одном проекте одно решение может быть подходящим, а на другом - не совсем. Контекст важен. Вы его не даёте.

posters-grid__poster

Вы не ответили на мои вопрос "зачем". Это допустимо, но нужно понимать когда и почему. Иначе будет дублирование кода. Сейчас у Вас, скажем, posters-grid, потом будут articles-grid а делают они одно и то же.

Обязательно ли выкладывать изображения в 2к и более?

aliasmark,
А можно было просто прочитать 2 статьи :-)
https://habr.com/ru/company/htmlacademy/blog/585864/
https://habr.com/ru/post/150071/

Как при наведении мыши раскрыть блок с подробной информацией?

.hide{
    visibility: hidden; 
    width: 0px;
    height: 0px;
}
.hide:hover{//1 способ не работает
    visibility: visible; 
    width: max-content;
    height: max-content;
}

Как навестись на элемент у которого ширина и высота 0 пикселей?

// 2й способ не работает

Та же проблема что и в первом способе, + ещё одна проблема, что этот код может отрабатывать раньше чем отрендарятся элементы (то есть window.onload отработает раньше чем getResponse), и соответственно, list будет пустым массивом.

Чтобы предложить нормальное решение, нужна визуализация желаемого результата.

Как по БЭМ правильно прописать классы в данном случае?

Shimpanze,
Зачем Вам два бэм блока на одном HTML элементе? grid и posters-grid - второй бэм блок(posters-grid) зачем?
Зачем Вам бэм микс posters-grid__poster на poster-n?
Зачем Вам нумерация блоков poster-n?

Как по БЭМ правильно прописать классы в данном случае?

недостаточно информации, но, предположим, что внешний див у вас сетка, внутренние - элементы, и тогда ответ такой:

1) Если предположение верно, то в сетке вообще о постерах ничего не должно быть. Должно быть что-то типа просто <div class="grid"> или с модификатором, говорящем о двух колонках: <div class="grid grid_col_2">. Ну на худой конец <div class="grid grid_type_posters"> если это какая то уникальная сетка не повторяющаяся в рамках проекта никогда и нигде.
2) Нижнее подчёркивание или тире - это на Ваш выбор, что использовать для разделения слов. Просто тогда нужно использовать разные разделители для сущностей, чтобы не пересекались с разделителем слов.
По классической версии нижнее подчёркивание используется для разделения модификатора.
3) Зачем Вам слово -item тоже не ясно.

итого:

<div class="grid">
    <div class="poster"></div>
    <div class="poster"></div>
</div>

Как сделать прелоадер для формы?

Ну и в чём вопрос? Можно ли? Можно.
Что у Вас не вышло?
Перед отправкой отобразили лоадер, после получения ответа убрали и сделали редирект.
Профит.

Как создавать кастомные html теги?

https://developer.mozilla.org/ru/docs/Web/Web_Comp...

Как убрать белую полоску внизу экрана на сайте в мобильной версии?

https://stackoverflow.com/questions/7768269/ipad-s...
Тут собственно перечислены варианты

Как убрать белую полоску внизу экрана на сайте в мобильной версии?

Я год назад нормальных решений не нашёл. Были только костыли с вынесением body на fixed и ещё что-то там.

Как сделать так чтобы в input нельзя было вводить меньше 5?

<input type="number" min="5" max="50" />

или слушатель для события input на инпут, проверять что ввели и реагировать соответствующим образом.

Свой простой toast react?

В основном - размещают так высоко, как имеем смысл. Например, у Вас может быть основной шаблон и шаблон страницы 404. В основной шаблон включают рядом с маршрутизатором, в 404 не включают потому что там этот компонент не нужен и зачем его вообще грузить.
Сами элементы пропихивают через стор, например.

Обязательно ли выкладывать изображения в 2к и более?

aliasmark, ну и совершенно непонятно причём тут 2к и 4к мониторы. Если у нас есть 2 монитора, один рассчитан на full hd, а второй на 4к, но у них одинаковая плотность пикселей, и мы говорим про изображение, которое рендерится в, условно, 500 на 500 пикселей, а не в фулл скрин, то и изображение им можно отдавать одинаковое.
Просто это будет означать, скорее всего то, что на 4к мониторе физический пиксель больше, то есть если близко сидеть к монитору, то будет видна "зернистость". Но это уже совсем другая история.

Обязательно ли выкладывать изображения в 2к и более?

aliasmark, давайте по полочкам.
Вы задаёте вопрос:

Обязательно ли выкладывать изображения в 2к

2к это 2048×1080. Если render size картинки 500 на 500 пикселей, то зачем там 2к, который в 4 раза больше по ширине и в 2 раза больше по высоте?
Отсюда и вопрос, КУДА вы хотите "заливать".

Другое дело, если Вы спрашиваете про использование изображений с двойной плотностью пикселей. Это совсем не то же самое. Тогда оригинальный размер изображения будет 1000 на 1000, хотя render size так и останется 500 на 500 и на экранах с двойной плотностью пикселей, aka ретина, изображение будет выглядеть чётче чем изображение с одинарной плотностью пикселей(то есть само изображение тоже было бы 500 на 500).

Далее, если картинка маленькая, то и ужимать её можно больше, так как 1) на небольшие изображения пользователем уделяется меньше внимания, 2) на маленьком изображении далеко не всегда важна чёткость. Так, например, если у нас одна и та же картинка на одном сайте фулл скрин(1920 на 1080), то, скажем, в целях оптимизации мы зададим ей качество 80. А на другом сайте, где эта картинка лишь превью к посту, скажем, 200 на 200, мы зададим выходное качество 40. Это всё условно, но мысль, думаю, понятна.

Далее, Вы спрашиваете "обязательно ли", и тут же говорите "но это же отнимает время". И тогда совершенно не понятно зачем Вы пришли что-то спрашивать. Обязательно? Нет. Вы и сами это прекрасно знаете. Работает же? Работает. Контент можно потреблять? Можно. Как тогда это может быть обязательным? Да и раз у Вас такой вопрос, значит сверху от Вас этого никто не требует.