шапка, футер, сайдбар - безусловно являются компонентами.
логотип, меню, переключатель языков, соц сети, гамбургер:
лого - да, меню - да,
переключатель языка - не обязательно, но если код этого блока занимает много места, можно вынести в отдельный компонент,
соц.сети - обычно да. Потому что обычно соц.сети много где на сайте используются,
гамбургер - наверное не стоит, потому что: 1) является неотъемлемой частью шапки, 2) не занимает много места.
При желании мелкие штуки типа гамбургера можно вынести в подкомпонент, если система сборки позволяет.
Итак, что такое компонент:
1) независимый блок - часть кода, используемая независимо от родителя, может применяться в разных местах
2) большой блок - большой кусок кода, который имеет конкретный замысел, типа баннера, слайдера и тп. Пускай он нигде и никогда не будет больше использоваться, кроме как на главной, но он большой и самостоятельный мальчик. Так что селим его отдельно.
Вот как минимум две отличительные черты компонентов от некомпонентов.
Ой, это я что-то про разметку все говорила =))
Про стили - как говорили выше, все нужно отделять. Отлично, если каждый css-файл будет содержать верстку только одного логического блока.
ПыСы: глядя на твой скриншот, складывается впечатление, что папки для этих файлов не нужны. Смысл в таких длинных и повторяющихся путях?! components/header/header.scss Да никакого
Тут нужно галочку поставить.