Виталий Першин

Помимо вопроса нужно еще и поле ввода выводить, если я вас правильно понял. Смотрите как это сделано в дефолтном шаблоне:

[question]
			<li class="form-group">
				<label for="question_answer">{question}</label>
				<input placeholder="Введите ответ" type="text" name="question_answer" id="question_answer" class="wide" required>
			</li>
		[/question]

Правильно будет модифицировать или миксовать каждый элемент. Вложенность использовать только в крайнем случае, когда нет других вариантов. Если использовать css переменные, которые задаются в родителе, то в таком случае можно обойтись без модификаторов для элементов, так же можно наследовать цвет и шрифт от родителя, чтобы не задавать лишних модификаторов.

Например так:

Вы бы свой код показали что ли

После смены формата, нужно делать сброс:

Если это позиционирование надо менять именно в конкретном блоке и больше повторять не будет, то можно миксовать так:

<div class="main-block__title welcome__title"></div>

В css блоки которые находятся внутри, должны быть записаны выше чем блок родителя, в такой последовательности миксы делаются легко. Если же у вас блок родитель идет
раньше и стили надо переопределить, тогда в вашем случае будет лучше использовать модификатор.

Как вариант:

Миксы нужны для того чтобы внести корректировки в конкретный блок, если такие корректировки повторяются в разных блоках, значит это модификатор

Это можно легко сделать при помощи -webkit-mask

Активному слайду слик присваивает класс .slick-active от него и стоит отталкиваться при реализации анимации:

Не совсем понял, но думаю так:

$(document).ready(function () {
    $("button.apply._mt._mb.showPhone").one('click', function (e) {
        ym(71108938, 'reachGoal', 'showphone');
        console.log("test-support");


        // сначала добавляем класс на который будем целиться
        $('#reachGoal').addClass('ReachGoalPhone');

        // Теперь можем вешать на него событие
         $(".ReachGoalPhone").one('click', function (e) {
            ym(71108938, 'reachGoal', 'callphone');
            console.log("test-support2");
        });
    });
});

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

<video class="video-pc" autoplay="true" loop="true" muted="muted">
  <source src="/video/tattoo.mp4" type="video/mp4">
</video>

Если бы предоставили вменяемую разметку было бы проще, но примерно так:

#menu .dropdown-inner {
  display: table;
  margin: 0 auto;
}
#menu .dropdown-inner ul {
  display: table-cell;
}

#menu .dropdown-inner li {
    display: block;
    width: 135px;
    margin: 20px;
    text-align: left;
}
#menu .dropdown-inner a {
    display: inline-block;
    padding: 5px 5px 5px 5px;
    clear: both;
    color: #1d1d1d;
    font-size: 18px;
    text-align: left;
}

#menu .dropdown-inner li a:hover {
  color: #fff;
  background:#ff9acc;
  border-radius: 55px;
  text-align: left;
}

К примеру у вас есть какой-нибудь список с красивыми ссылками одинаковой высоты, но текст в ней может быть и в одну и в 2 строки, если мы для отступов применим только padding, то может получится вот так:

Но если мы сделаем минимальную высоту и уменьшим padding, то у нас не измениться размер, а текст красиво впишется в размеры:


Мелочь, а приятно.

Чтобы помочь вам разобраться нужно видеть дизайн и понимать контекст проблемы, а то что я вижу в вашем наименовании это какая-то тавтология от которой у новичков и возникает неприязнь к БЭМ

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

Только потому что вы не можете продумать название или структуру? Очень плохо.

я в последнее время избегаю давать такие имена, типо item-title )

И правильно делаете, то что вам предложили это дичь полная, блоки и элементы БЭМ не должны быть прилагательными и отвечать на вопрос какой, какая, какие и т.д.. это работа модификаторов.

А теперь по делу. Если взять за основу вашу разметку, то тут несколько вариантов. Например проработать структуру. Вам правильно подсказали вы в цену обернули и цену и вес, а значит вы явно что-то делаете не так. Ваш код может быть таким:

<td class="table__col shop-col">
    <p class="shop-col__info">
        <span class="shop-col__weight">1,2 кг</span>
        х
        <span class="shop-col__price">200 руб.</span>
    </p>
</td>

И можете без проблем модифицировать любой элемент.

Еще возможны миксы с классами отвечающими за цвет, у вас может быть заранее определены классы с конкретными цветами, которые повторяются в макете:

<td class="table__col shop-col">
    <p class="shop-col__info">
        <span class="shop-col__weight">1,2 кг</span>
        х
        <span class="shop-col__new-price color-accent">199 руб.</span>
        <span class="shop-col__old-price color-grey">200 руб.</span>
    </p>
</td>

А вы точно z-index выставляли? Если к header добавить z-index: 2 вместо одного, то все меню сверху как и должно..

header{
	position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    z-index: 2;
    background-color: var(--color1);
    padding-top: 61px;
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
}

.header-top и .header-lower

Так лучше не делать. Старайтесь не использовать прилагательные. Смысл БЭМ в переиспользовании и то что сегодня было вверху, может оказаться внизу и наоборот, после таких преобразований, когда top окажется где-то в центре как минимум возникнет диссонанс.
Логичнее вынести в 2 независимых блока, прекрасно подойдут названия такие как panel, bar, info, navigation, если хотите зарезервировать эти имена для других целей, то можно использовать префиксы и сочетания ibar, i-bar, info-panel. Оба эти блока можно обернуть в единый header и миксовать class="header__panel panel", хотя я бы их полностью разделил, так как верхняя панель, явно может быть переиспользована где-то в футере.

2) Есть любой блок, у которого структура по своей сути - это container > row > col*(items). Как лучше её организовать с т.з. БЭМ?

Тут нужно видеть с чем работать, но в таком контексте лучше использовать микс:

<div class="news">
  <div class="news__container container">
    <div class="news__row row">
      <div class="news__item">
        <!-- контент -->
      </div>
    </div>
  </div>
</div>

Таким образом мы можем модифицировать row и container в контексте необходимого блока и понимать назначение классов.

Чтобы угодить pageSpeed, то тоже swap

Тут довольно развернуты ответ: https://stackoverflow.com/questions/51496204/borde...

Если фон поля не прозрачный, то можно спрятать под него блок или псевдоэлемент с градиентом, который будет больше поля на пару пикселей и с таким же радиусом