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

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

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

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

.block {
  foo: bar;

  &_element {
    bar: baz;
  }
}

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

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

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

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

Мы не знаем. Возможно, вы гений, который изобрёл новые способы написания эффектов на CSS.
Но дело может быть в использовании пре- и пост-процессоров. Одни только вендорные префиксы могут в два раза увеличить количество строк на выходе. Или в том, что в копируемом коде учтены какие-то дополнительные сценарии или кроссбраузерность. Или в том, что вы скопировали не то, что нужно было.

Элементы ::before и ::after располагаются поверх ссылки и перехватывают нажатия на неё.
Самое простое решение - указать для них pointer-events: none;. Если же нужна поддержка древних браузеров, нужно играть с z-index или вообще всё переделывать.

В show 2s 1 есть неявный delay в 0 секунд. Вам нужно переопределяющие стили перенести под базовые в файле.

Как сделать адекватное отображение фоновой картинки?

Адекватность зависит от условий задачи. У background-size есть несколько хорошо документированных значений — адекватным будет то, что решит вашу задачу. Сразу скажу, что свойства «сделать хорошо везде» там нет — у всех свои плюсы и минусы.

Адблок.

Адблок вырезает.

Нет, нельзя.

Обернуть 4 блока в единый контейнер и задать фон ему.

https://developer.mozilla.org/ru/docs/Web/CSS/Spec...

TL;DR - вас спасёт !important.

label::after {
  top: 100%;
}

https://jsfiddle.net/alexey_m_ukolov/tLbe8yoc/1/

Как сделать так,чтобы "border-bottom" не увеличивался при наличии "padding-left", а оставался строго в границах "p"?

Именно в такой постановке - никак. Но если заменить padding на margin, всё будет работать.

1. Увеличивается размер ресурса.
2. Теряется атомарность изменений - поменяли какое-то свойство в CSS, весь файл инвалидировался в кеше, клиенту нужно заново качать картинку, хотя она и не изменилась.
3. Дизайнер не сможет просто отредактировать изображение.
4. Нельзя посмотреть изображение в редакторах.

Нет, скрыть нельзя. Показывайте скриншоты или видео.

Без хаков с абсолютным позиционированием этого сделать нельзя. А с хаками будет работать нестабильно, на то они и хаки.
Через :before это сделать совсем нельзя.