Алексей Уколов

Ну почему же не работает? Всё прекрасно работает, если указать контейнеру ширину так, чтобы текст переносился: https://codepen.io/alexey-m-ukolov/pen/PoQQQEa
Если строка всего одна, то justify ведёт себя как left.
Но на это можно повлиять, указав дополнительно text-align-last: justify; (в Сафари работать не будет)

Прекрасно всё работает: https://codepen.io/alexey-m-ukolov/pen/zYRPNvj

Должно быть либо так:

.block1 {
    width: 500px;
    height: 500px;
    border: 3px solid black;
    color: chocolate;
}

.block2 {
    width: 250px;
    height: 250px;
    border: 3px solid blue;
    font-size: 20px;
}

.block1:hover {
    color: green;
}

Либо так:

.block1 {
    width: 500px;
    height: 500px;
    border: 3px solid black;
}

.block2 {
    width: 250px;
    height: 250px;
    border: 3px solid blue;
    font-size: 20px;
    color: chocolate;
}

.block1:hover .block2 {
    color: green;
}

В вашем варианте указание цвета в дочернем элементе имеет приоритет над указанием цвета для родителя при наведении.

Потому что путь к логотипу у вас указан относительный (с точкой в начале). Нужно указывать абсолютный. Погуглите, что это значит и в чём разница.

В CSS используются { и }, а не ( и ).

Если же это вы сюда с ошибкой набрали, а в исходниках всё правильно, то дело в пути до файла - он у вас относительный и если html-файл и css-файл лежат не в одной директории, то второй не будет найден.

Родственные селекторы по своему поведению похожи на соседние селекторы (запись вида E + F), но в отличие от них стилевые правила применяются ко всем близлежащим элементам. К примеру, для селектора h1~p стиль будет применяться ко всем элементам , располагающихся после заголовка <h1>. При этом <h1> и <p> должны иметь общего родителя, так что если <p> вставить внутрь <div>, то стили применяться уже не будут.

htmlbook.ru/css/selector/sibling

Соответственно, нужный вам селектор выглядит так: #check:checked ~ .box .stop

Ховер должен срабатывать на каком-то элементе. Через стили можно "создать" псевдоэлемент и поместить в него иконку, если она сделана шрифтом или через svg.
Дальнейшее обсуждение можно вести только имея пример кода перед глазами.

Я же дал вам ссылку на статью, где всё расписано: https://css-tricks.com/aspect-ratio-boxes/

An aspect ratio can be anything, and they commonly are completely arbitrary. A video or image can be cropped to any size.
So how do we figure out the padding-top for our 1127.34 × 591.44 SVG above?
One way is using calc(), like this:
padding-top: calc(591.44 / 1127.34 * 100%);

Как относиться к таким ошибкам?

Игнорировать и не пользоваться валидаторами вообще - они все неадекватные.
Есть, конечно, вероятность, что у вас сборка настроена на какие-то очень древние браузеры и в реальном мире префиксы для каких-то свойств давно не нужны, а вы их добавляете, но даже в этом случае ничего плохого с вашим сайтом не произойдёт.

Стоит ли отключить префиксы?

Ни в коем случае.

Никак, псевдоэлементы недоступны для js.

h1 {
  overflow: hidden;
  height: 0;
  padding-top: 56.25%;
  background: url(/images/happy-birthday.svg);
}

https://css-tricks.com/aspect-ratio-boxes/

Смотря что за эффекты, зачем они нужны, какое пользователь ожидает поведение и какие есть другие стили. Иными словами - никакого "правильного" способа нет.
Если же вертеть в вакууме сферического коня, то логичнее всего обычно "анимировать" ссылку.

Зависит от ваших целей.
Если вам надо блог или магазин сделать, и вас устраивают существующие готовые шаблоны, и вы не захотите в них ничего никогда поменять, то да - зря.
Если вы хотите разработкой зарабатывать, то в мире огромное количество (абсолютное большинство) тех, кого готовые шаблоны в той или иной степени не устраивают.

Правильно - вырезать только ту часть изображения, которая реально используется, потом уменьшить её до реальных размеров (и сделать копии для разных PPI), а потом сжать через оптимизаторы, чтобы удалить лишнее.
И тогда три с половиной мегабайта превратятся в сотню байт.
К "production" это всё не имеет никакого отношения - это первые шаги вёрстки любого макета.

Убрать у body overflow: hidden и добавить margin: 0.
И ещё:

.photo_app {
    height: 100vh;
    position: fixed;
    overflow: auto;
}

Вложенность в SASS как раз позволяет удобно делать БЭМ-селекторы:

.block {
  foo: bar;

  &_element {
    bar: baz;
  }
}

Но при использование вложенности scss формируется длинный селектор

Сам факт использования SASS никак на сложность селекторов не влияет. Результат зависит от исходного кода, а не от инструмента компиляции.
Да, SASS позволяет навертеть селекторы, если не быть осторожным и писать бездумно, но он к этому не обязывает.

Расширение браузерное их добавляет.

Вы уже его фиксируете, записывая в LocalStorage. Просто используйте эту информацию при загрузке страницы.