В чем заключается ошибка в коде?

Вы хотите получить <input>type="text"</input>? Вы же это не всерьез?

Atomic CSS словарь классов?

Михаил, https://docs.emmet.io/cheat-sheet/ - секция css

Как очистить передаваемое значение в foreach?

Thes, Либо я чего то не знаю, либо все должно отрабатывать sandbox.onlinephpfunctions.com/code/54b94c3ca238f3... (Execute code)

Как сделать на чистом css, когда в родительском пункте есть разделы, то через before показать стрелочку?

natojezlo, Вообще это должно делаться на бекенде, но если на фронтенде хотите поморочиться, то ищите что то типа javascript check if menu link has submenu

Как сделать на чистом css, когда в родительском пункте есть разделы, то через before показать стрелочку?

natojezlo, Так если меню динамически выводится то и должна быть возможность добавить такие классы.

возможно ли на css выводить как бы по условию

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

Как сверстать обтекающие блоки таким способом?

Ivan Bogachev,

В моем примере в мобильной версии я ставлю display:block всему.

В том то и вопрос, что display приходится переопределять для mobile. В обратном же случае гриды задаются только от 30em и более.

mobile-first стили для .my-grid для mobile

desktop-first стили для .my-grid для mobile

Как сверстать обтекающие блоки таким способом?

Ivan Bogachev, зачем мобильные устройства напрягать гридами, если на них блоки все равно идут друг под другом?
mobile-first не зря же придумали

https://codepen.io/web-tech/pen/qzeOyL

Как блокируется ручное редактирование стилей в девтулз?

А загуглить не пробовали?
google => Styled Component styles disabled in Chrome DevTools
Есть issue https://bugs.chromium.org/p/chromium/issues/detail... и ответ "We don't have any plans to support editing of CSSOM-based rules in DevTools."
Отсюда вывод: нужно редактировать CSSOM-based стили - пользуйтесь Firefox.

Как решать такие нестандартные решения в верстке?

Рустам Байназаров, Так я собственно и написал два варианта для position с absolute и relative. Смотря относительно чего позиционировать - если контейнера, то absolute, если просто подвинуть элемент, то relative. Про negative значения в ответе моем также указано.

Стоит ли уходить от многословности верстки?

Arman, Сетку бутстрапа с помощью sass миксинов многие используют, чтобы уйти от засорения разметки кучей классов. И даже не в рамках БЭМ. Поэтому таким подходом уж точно никого не удивите.

Стоит ли уходить от многословности верстки?

Arman, Ваш вариант (и в принципе наиболее правильный) описан на медиуме https://medium.com/@andersonorui_/bem-sass-and-boo...

Стоит ли уходить от многословности верстки?

Виталий,

Этот пример ничего общего с БЭМ не имеет и я объяснил почему.

Еще раз могу повторить, что пример разметки вполне соответствует БЭМ
.model-list.model-list_secondary
Если развернуть эту emmet style схему в html, то

<div class="model-list model-list_secondary">
</div>

Arman, по поводу миксования блоков с классами сетки бутстрапа, то это уже многократно обсуждалось
Микс БЭМ и bootstrap-сетки, это читабельно?
BEM + Bootstrap(bootstrap grid system), Как правильней делать каркас??
Как использовать БЭМ в Bootstrap?
Как совместить сетку и БЭМ?
https://medium.com/@andersonorui_/bem-sass-and-boo...
https://github.com/awinogradov/sharps - вариант сетки БЭМ
https://ru.bem.info/forum/1126/

Стоит ли уходить от многословности верстки?

Arman,

У вас каша из стилей, освойте что-то одно...

Я то здесь причем?

ТС просто так привел пример своей верстки (emmet style) - как он стили будет прописывать это уже другой вопрос.

Стоит ли уходить от многословности верстки?

Виталий,

.model-list.model-list_secondary

Тут ничего общего с БЭМ

Блок model-list и его модификатор model-list_secondary - читай документацию https://ru.bem.info/methodology/naming-convention/

Почему фон не заполняет DIV полностью, и как исправить?

NemuiSaburau, Да не надо ничего никуда запихивать - пропишите для родителя clearfix, ссылку на который я вам давал. Или все таки начните уже использовать flexbox - с ним избежите подобных проблем.

Background - background-size в сокращенной инлайновой записи?

Антон, поправил

Карусель изображений Fotorama выходит за границу flex-блока, как исправить?

400 * 3 = 1200px плюс отступы явно же больше flex враппера, который лежит в контейнере 1100px.

Как утопить блок?

Дмитрий, Слишком уж "многословная" у вас сетка получилась. Достаточно вот так расписать
https://codepen.io/web-tech/pen/ewPQOp

Как исправить ошибку в слайдере Notice: Undefined variable: og_url?

Значит логотип будет выводиться на всех страницах сайта)

Как реализовать этот момент?

kshkld7ck
или же

@media (min-width: 720px) {
  .parent {
    display:flex;
  }
}

Зачем для мобильных устройств flex? Блоки на мобильных устройствах и так выстроятся друг под другом.