VegasChickiChicki

Очищать вручную. Я вообще не понимаю как "угадать" где очищение свойств сработает нормально, а где поломает svg, по этому вообще не рекомендую в автоматическом режиме править svg, только если в спрайт собирать уже очищенные.

Не знаю насколько хороший пример, но однажды так делал.

Устанавливаешь глобально размер шрифта 10px. Получается что 10px - rem, уже верстасть проще. Все верстаешь в rem'ах, вместо пикселей.

Зачем это?
Что бы адаптировать под большие экраны. Просто увиливаешь шрифт(в медиа запросах) и у тебя весь сайт "скейлится" на пропорциональный размер.

.cart-finished-house{
    bottom: 15%;
    transition: bottom easy 0.5s;
}

.cart-finished-house:hover{
    bottom: 1%;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
}

Сделайте список ol, в него положите li. Ol - 100% ширина, li - 100% ширина + нужные отступы. В чем проблема?
"Как сверстать пронумерованный список с ховером на всю ширину экрана?" - сверстать нумерованный список с ховером во всю ширину экрана, какой ответ вы хотите услышать? Хотите увидеть пример кода? Так это вам на Фрилансим с заявкой...

Вопрос вроде бы не вопрос, но вот как делаю я(я ленивый, так наверное лучше не делать, но все же):
1) Файл стилей, главный, сюда мы подключаем все остальные стили и пишем стили основной страницы\страниц
1.1) Если страницы большие, лучше сделать для каждой отдельный файл стилей и подключать в основной
2)Файл меди запросов, тут я думаю понятно :)
3) Файл миксинов и общих классов.(общие классы - что вроде кнопки, которая встречается 10 раз на странице подряд или что-то вроде того :)) Цвета общие в переменные, тоже тут. И прочие мелкие вещи, которые не хочется оставлять в главном файле стилей.
--------------------
P.S. Я слышал, что некоторые разбивают файлы стилей на много много файлов, чуть ли не по секциям, по типу:
header.sass footer.sass aside.sass и т.д. Но я ленивый и по этому в крайнем случае делю на разные страницы, если уж много прям стилей.

Приведу аналогию:
JS - молоток, вы им выбиваете гвозди.
JQ - гвоздострел, вы им так же вбиваете гвозди, но быстрее.

Говорить о том, что более актуальные JS и JQ, это какая то дичь.
Вы вообще в курсе, JQ это библиотека JavaScript?

Если я правильно понял, то вот пример:

.header .active{ color: red; }
.main .active{ color: white;}

Один класс, но в разных местах имеет разные свойства. Когда будете писать проекты посложнее, где верстка действительно сложная с десятками, а то и сотнями классов\тегов, поймете что лучше делать так, как я показал в примере.

P.S. Так лучше не делать, в комментариях объяснили почему :)

slick > div {
width: 100%;
height: 200px;
}
(Высоту указать какую нужно, под размер выпадающего блока.)

Добавить хедеру
background-position: center center;
Я бы попробовал так

А может просто задать блоку с со слайдером абсолютное позиционирование и отрицательный z-index?

shpargalkablog.ru/2017/04/position-sticky.html
В css есть такая команда )

Сам новичок в JS ,но попробую ответить. Если я правильно понял ,то они как бы лежат друг на друге ,то есть через position: absolute. Тогда нужно каждому из них задать айди,одному блоку задать позицию отрицательную (к примеру left: -1500) , отследить x скролл мышки (var posX = window.pageXOffset;) и изменять Y позиции блоков,то есть увеличивать left/right. Тогда получится что при скролее координата Y (блоков) будет зависеть от X координаты страницы и один блок будет как бы выезжать из-за границы страницы ,а другой будет туда заезжать.