Советую использовать sass/less и писать так, чтобы Вам было удобно. В любом случае потом нужно использовать минификатор стилей, который и так всё сожмет и распределит, как нужно.
Также если у вас есть одинаковые по смыслу блоки, можно задать им общий стиль titles, а уже отдельно каждому заголовку определить цвет/размер и другие отличающиеся стили.
Зависит от того с кем работаете. Если один - сами решайте, если в команде - как там заведено(вынесите эту тему на обсуждение).
Заказчику по сути должно быть без разницы, как Вы делаете - ему нужен результат.
Когда Вы покупаете хлеб в магазине - Вас волнует на каких углях его пекли?
Тем более данные технологии не сильно уж мудреные, порог вхождения в них довольно низкий. Так что можно позволить себе знать и то и другое.
У Вас из-за float'ов всё полетело. clearfix'ы криво расставлены. У Вас блок "страницы"/step - float: left, но без clearfix, а внутрь него куча всего вложено. + 100vh не помогут, т.к для каждого такого блока высота скриптом высчитывается и прописывается элементу. А они съезжают вверх из-за кривых float'ов.
Как вариант при загрузке страницы делать проверку на якорь в адресе и прокручивать выше на высоту хедера.
window.onload = function(){
if(window.location.hash) {
//если есть якорь, то скроллим вниз на высоту шапки
} else {
//здесь если нет, можно убрать блок else
}
}
А медиа запросы нужны, потому что расположение элементов на экране 1920 будет отличаться от расположения на экране мобильного телефона. Не впихнете Вы туда видео шириной 1080 и красивые картинки по бокам, поэтому надо перестраивать структуру(относительно перестраивать).
Для автоматического перестроения элементов - можно flex + vh/vw.
Под картинкой, наверное, Вы имеете ввиду thumbnail.
В файлу loop.php Вашей темы измените вывод темы
if ( has_post_thumbnail() ) {
the_post_thumbnail();
//здесь выводим в нужном формате, если есть thumbnail
}
else {
//здесь выводим в нужном формате, если нет thumbnail
}