Ivan Stroykin

<div>
    <app-component><!-- Внутри флекс элементы --></app-component>
</div>

...
@Component({
  selector: 'app-component',
  templateUrl: '...',
  host: {
    'class': 'app-flex-style'
  }
})
export class AppComponent {
  ....
}

и прописываете классу .app-flex-style { display: flex } и всё остальное, что нужно. Не надо засорять html, и нужно всё раскладывать по полочкам для лёгкой манипуляции приложением

Например, jQuery Before/After Plugin или TwentyTwenty, или Before-After Slider&Banner

Пример

Так делать нельзя. Если хотите, чтобы менялся внешний вид в зависимости от каких-то настроек пользователя, делается это так (как практический вариант):
в компоненте layout, который "обхватывает" все остальные компоненты пишете подстановочный класс, который будет меняться в зависимости от выбора пользователя. А в стилях пишите основные стили для всех + в зависимости от выбранного класса, то есть:

.selected-class-2 h1 {
  color: red;
}

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

Маленький банальный пример. От вас - улучшить его

Нуу, как-то так. При желании можно сократить код. Пример

var width = document.documentElement.clientWidth;
if (width > 992) {
    document.location.href = "http://google.com";
}

Пример. Не нужно плодить лишний html и css код...

codepen.io/StivinKing/pen/bgePye

<div class="header">
  <nav class="navbar navbar_visible">
  <ul>
    <li><a href="#">Visible</a></li>
    <li><a href="#">Hidden</a></li>
  </ul>
</nav>
<button class="btn">the btn</button>
</div>

$(document).ready(function(){
	$(".btn").click(function(){
		$(".navbar").slideToggle(500);
	})
	$(".btn").click(function(){
  	$(".navbar").removeClass("navbar_visible").addClass("navbar_hidden")
  })
});

1 div, 1 class
codepen.io/StivinKing/pen/PWzmJB
p.s. лучше для кнопки использовать button

Влияет. Каждый файл это дополнительный запрос.
Но раскидывая стили по файлам удобнее за ними следить и править.
Что же делать? Правильно. Раскидывать по файлам, и работать с ними. А при загрузке на сервер пропускать через сборщик проектов (к примеру gulp), который объединит все css файлы в один, а так же сожмет их

Если проект большой (больше чем просто 5 страничник) то во всем нужно строить правильную структура. Без неё в дальнейшем будет большой хаус, когда нужно будет что-то изменить, а зависимости валяются по всему проекту. И это касается как языков программирования, так и, конечно же, таблицы стилей.
Сразу скажу, что последний вариант, когда идет класс, и в нем же прописаны media, которые необходимы только этому классу это очень хороший вариант. Так как в случае чего не нужно бегать по всему коду (а если вы пишите на sass, то файлов будет много. по файлу на каждый компонент). А так все рядом, все видно, сразу понятно что к чему и легко вносить изменения.
На скорость никак не повлияет. Браузер в любом случае обработает все css которые вы ему скормите. А вот на последующую скорость разработки повлияет довольно таки сильно.

width: 32%; и по 1% отступа с правой стороны каждого блока + у первого 1% слева. Это если уж в легком варианте сделать. А разбираться лучше на примере уже устоявшихся сетках. Посмотрите как это сделано в том же bootstrap

Немного грубый вариант, думаю уж наведение допилите ссылка

Дополнил ваш код ссылка
Чтобы понять, что да как, просто сравните.
p.s. Рекомендую описывать элементы сверху вниз. К примеру, в вашем случае сначала родитель: "card", ниже дочерние: заголовок, цена, список, кнопка
И зачем "item-price" делать списком?

Подключайте между тегами другой css файл, который, если хотите, пишите на less и компилируйте

Не обижайте codepen)
Ссылка

webfont
Для подключения нужна регистрация. Можно без проблем скачивать с готовым css, можно изменять вид шрифтов под свои нужны

Дописываем:

#left_side {
    position: relative;
}
ul#catalog_menu ul {
   right: -304px;
}

Теперь как бы не сжали основной блок, всплывающий всегда будет по контуру.
codepen.io/StivinKing/pen/VKYjRV

Но код, если честно, надо бы полностью переписать. Там столько лишнего и не нужного