Vladislav

Семантичен.
main - главная обертка для сменяемой части кода(условно шапка и подвал у вас не меняются).
section - используется для выделения смысловых блоков, как вы и указали.
https://developer.mozilla.org/ru/docs/Web/HTML/Ele...

ajaxRequest().then(() => {
  window.location.href = 'http://www.example.com'
})

document.querySelector('.reviews__commentaries.value-commentaries').addEventListener('click', function(){
    this.parentNode.nextElementSibling.classList.toggle('slide-tooggle');
    this.parentNode.nextElementSibling.nextElementSibling.classList.toggle('slide-tooggle');
    this.nextElementSibling.classList.toggle('rotate-comment');
});

slideToggle() додумывайте через css))

.reviews__response-comment{
  -webkit-transition: height .3s ease;
  height: 0;
  overflow: hidden;
}
.reviews__response-comment.slide-tooggle {
  height:100px;
}

в смысле валидности верстки? без разницы, хоть 1px, хоть 100px.
с точки зрения юзабилити, надо смотреть по ситуации.

Если под современные браузеры делается и IE неважен, то можно просто добавить контейнерам(у которых display: flex) св-во gap: 10px 20px;

И нет, я не пьяный.

А нельзя вместо .filter__btn-category+.filter__btn-category просто отступ в другую сторону?

.filter__btn-category {
  margin-right: 20px;
}

Отменять всплытие события:

$('.custom-checkbox').click(e => e.stopPropagation());

Или проверять, где был клик:

$('.tab').click(function(e) {
  if ($(e.target).hasClass('custom-checkbox')) {
    return;
  }
  ...

label строчный, соответсвенно только строчные.

1. Вставить два спана с текстами "открыть" \ "закрыть" и по классу на кнопке скрывать не нужный.
2. Задай кнопке два аттрибута, текст открыть и текст закрыть и тяни нужный

$("#categoryBtnOne").prev(".tabs__links-products.none");

$('.tabs__field-search').on('input', function() {
  const search = $('.tabs__field-search').val().toLowerCase();
  const $ul = $('.tabs__list-cars ul');
  const $li = $ul.find('li');
  const $liToShow = $li.filter((i, n) => $(n).text().toLowerCase().includes(search));

  $liToShow.fadeIn();
  $li.not($liToShow).fadeOut();
  $ul.toggleClass('column-search', !!search);
});

$('.tabs__item-tab').not(':eq(1)').hide();
    $('.tab').click(function() {
        $('.tab').removeClass('active').eq($(this).index()).addClass('active');
        $('.tabs__item-tab').hide().eq($(this).index()).fadeIn()
    }).eq(1).addClass('active');

В функции max не включительно, но это на руку, так как массив начинается не с 1, а с 0.

$('span', this).toggleClass('rotate');

Остальное за css, и логикой.
https://codepen.io/Creative_Srijon/pen/LNzrRo
https://codepen.io/Creative_Srijon/pen/xVXzOM
https://www.w3schools.com/howto/howto_js_form_steps.asp

$(this).next().slideToggle();

Зависит от интерактива на сайте. Чем его больше, тем больше смысла. Но на лендосе такое маловероятно

например на body

Поскольку body не следует использовать в качестве корневого элемента приложения, то так же, как и без vue - путём прямого обращения к classList:

<button @click="onClick">

methods: {
  onClick() {
    document.body.classList.toggle('active');
  },
},

Если же не "например" - читайте документацию, там всё есть.

https://jsfiddle.net/h4mpy/gpwecyka/3/