inkShio

если у сайта не одна страница, то для каждой нужно писать css в отдельном файле?

нет

но ведь на страницах много одинаковых элементов, таких как header, footer.

вот и ответ на твой вопрос.
Делаешь много разных файликов input, textarea, button, footer, header и т.д. После с помощью gulp или webpack склеиваешь их в один.
Зайди на github и посмотри сборки, многое прояснится.
Вот одна из многих статей.

Не знаю что ты хочешь в итоге получить, но чет у тебя там беда.

.footer-widgets {
    height: 180px; <- Это удалить
}

.sidebar-column {
    position: relative;
    bottom: 70px; <- Это удалить
}

.widget-area .widget {
    position: relative;
    margin-bottom: 55px; <- Это удалить
}

и будет у тебя нормальный футер

можешь сделать переменную и просто ее подставлять

$self: "select";

.#{$self} {
  &.open {
    z-index: 2;
    .#{$self}__dropdown {
      display: block;
      background-color: white;
    }

    .#{$self}__label {
      border-bottom: none;
    }

    .#{$self}__arrow {
      transition: 0.3s ease;
      transform: rotate(180deg);
    }
  }
}

Или вот тебе еще один вариант

.select {
  &.open {
    z-index: 2;
  }

  &.open &__dropdown {
    display: block;
    background-color: white;
  }

  &.open &__label {
    border-bottom: none;
  }

  &.open &__arrow {
    transition: 0.3s ease;
    transform: rotate(180deg);
  }
}

Думаю, да. Можешь зайти на любой новостной сайт и посмотреть как они делают. У них у всех куча разметки.

Ты выбираешь 2-ой параграф в блоке, но второго параграфа у тебя нету, вместо него у тебя там h1. Пиши p:nth-child(3)

Вот хотел спросить, когда нужно добавлять префиксы браузеров?

Если просто интересует когда, заходи на caniuse вбиваешь допусти flexbox и смотришь версии браузеров, у одних будет написано полностью поддерживается, у других частичная поддержка, поддержка с помощью --moz и т.д. Ну а что бы не заморачиваться с этим всем, как уже посоветовали использовать autoprefixer.

$.ajax({
    cache: false
});

?

используй slickGoTo
если погуглить то даже примерный вариант можно найти codepen.io

в modal-container добавь left: 0; top: 0;

technicalseo - вот примеры.
Так же у яндекса и гугла есть валидаторы.