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

Оба варианта приемлемы.
Второй вариант почти всегда подходит. Я обычно делаю отдельного logo и у меня стили с картинками для лого лежат в отдельной папке logo, а там уже либо в зависимости от контекста делаю микс header__logo footer__logo, либо модификатор, например для уменьшенной копии можно сделать logo_size_small
А в случае если лого относится только к конкретному блоку, то можно без проблем сделать его элементом, одно другому в таком случае не помешает никак.

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

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

-webkit-line-clamp :


Почитать можно тут: https://habr.com/ru/company/ruvds/blog/535016/

Вполне нормальный подход, который можно применять хоть к каждому элементу по отдельности, а в последствии использовать сборку с объединением медиа-выражений.

Я уже давно так делаю, например для верстки меню, ведь обычно в мобильной и в десктопных версиях, они кардинально разные. Вот хорошее объяснение такой техники: https://youtu.be/o7A0e4PkSAQ?t=1460 блок про медиа-выражения.

Ну и как ранее сказали, если у вас 2 разных верстки, тогда уже практичнее применять медиа в линках

Вроде очевидно.. 200px * 5 = 1000px, ваши блоки занимают все доступное пространство, но при этом вы добавляете gap = 10px и получается 200px * 5 + 10px * 4, что в итоге больше 1000px и происходит перенос, если бы перенос был запрещен, то блоки ужались бы в случае отсутствия жадности..

https://jsfiddle.net/l2banners/gnLjqhv6/2/

Чтобы слайдер нормально работал не надо переделывать слайды, надо внутри слайдов вставлять свои блоки и там их крутить как захочется. Но если уж очень надо навешать костылей, то в размере надо учитывать отступы:

.clients__box {
  outline: 1px solid red;
  margin: 0 40px;
  margin-bottom: 20px;
  width: calc(100% / 3 - 80px) !important;
}

Чтобы контент становясь флекс элементом не вылетал за пределы блока, но тянулся на всю доступную ширину, надо помимо flex-grow: 1; добавить min-width: 0;

С вашей разметкой как-то так:

Учитывая что у вас неоднородный фон, градиент вам не подходит. В вашем случае подойдет маска:

.ticket__flex .ticket__item .inner__ticket {
    overflow-x: scroll;
    max-width: 1400px;
    width: 100%;
    -webkit-mask: linear-gradient( to left, rgb(0, 0, 0) 0%, rgb(0, 0, 0) 60%, rgba(0, 0, 0, 0) 100% );
}

Пример:

На чистом js:

let el = document.querySelector('#target');
	let coords = el.getBoundingClientRect();
	window.scrollTo({
		top: coords.top + window.scrollY,
		behavior: "smooth",
	});

На jQuery:

$("html, body").animate({
            scrollTop: $('#target').offset().top
        }
    );

возможно надо этот элемент сделать блоком, типо: list-headet или как?

Да, блоком, но не надо приплетать header. Блок должен называться таким образом, что-бы было понятно что он делает, а не где он расположен. А в последствии можно смиксовать блок, например:

<div class="header">
    <h1 class="header__title">Title</h1>
    <p class="header__desc">Description</p>
    <ul class="header__list list">
      <li class="list__item"><a href="#" class="list__link">link</a></li>
      <li class="list__item"><a href="#" class="list__link">link</a></li>
      <li class="list__item"><a href="#" class="list__link">link</a></li>
    </ul>
  </div>

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

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

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

Как вариант:

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

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

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