Antowa Kartowa

Предложу так навскидку. Может и не работать, могут нюансы полезть, но я бы начинал в таком направлении работать. У вас две колонки. Во второй колонке по очереди слоями идут блоки хлебных крошек, заголовка, блок с фото и какими-то ссылками, потом секция с основным текстом. Секция с фото и ссылками разбита на две колонки - одна для фото, другая для текста и ссылок. У секции с фото и ссылками есть свойство position: relative. Так же внутри секции с фото и ссылками должен быть блок который будет играть белый фон с желтой рамкой. У него например position: absolute, z-index: -1, top: -15px; left: 150px, right: 0px; bottom: - 125px;

https://jsfiddle.net/AntowaKartowa/Lh7bdef0/

Приходилось работать тупо с jpg. Надо ли говорить, что много неудобств. Ни размер шрифта нормально посмотреть, ни какие-то графические элементы в отдельную картинку получить без наложения других элементов страницы.

Скорее всего говорят о таких сервисах типа https://zeplin.io/ На последнем проекте дизайнер в него выкладывал как дизайны страниц так и сборки например всех возможных стилей кнопок, инпутов. Все это шариться. Идея ок. Во многом удобно. Показывает размеры, цвета. Позволяет определенные элементы скачать в виде отдельного файла. Но было нужно измерить какое-то растояние которое сервис сам не показывает. И непонятно что делать. Бывало нужно было иконку сукачать и нужно было просить дизайнера чтоб он что-то там в настройках сделал чтоб иконка стала скачиваемым элементом. Короче есть минусы, но идея ок. И это не один такой сервис. Думаю через пару лет большинство через них работать и будет.

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

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

Оно не должно мешать загрузке остальной страницы и ее скриптов.

Не очень ясно. Ну если попап часть лендинг пейджи, то как разметка и стили для попапа могут блокировать загрузку лендинг пейджи. Ну могут совсем немного увеличить время за счет того что увеличится размер разметки и стилей.

Другое дело джаваскрипт. Его загрузка и выполнение блокируют обработку и рендеринг страницы. Потому рекомендуется объявление джаваскрипта размещать или в самом низу страницы - начнет загрузку скрипта после загрузки страницы. Но кажется это не всегда гарантирует хороший результат.

Лучше добавить в теги скрипт атрибуты async или defer. Первый не блокирует рендеринг страницы, но начинает свое исполнение сразу как только загружен. Это потенциально может привести к проблемам. Например попап еще не отрендерен, а скрипт уже начал выполнение и не нашел в разметке попапа, не смог повесить обработчики событий и все нерабочий попап получится. Из-за этого же этот атрибут не гарантирует, что скрипты будут выполнятся в том порядке в котором объявлены. Опять же одни скрипты могут зависить от других и это может привести к неработающему функционалу.

Дефер же гарантирует, что исполнение скрипта начнется только после полной загрузки страницы и что скрипты будут исполнятся в порядке их объявления. Потому он самый предпочтительный.

Вообще есть бесплатный курс по оптимизации загрузки страницы от гугла. https://www.udacity.com/course/website-performance...

Кажется я в итоге не на ваш вопрос ответил.

Дк вроде уже ни в одной статье писалось, что цепочки селекторов это зло. Не столько с эстетической сколько с практической точки зрения.

1. Если тебе где-то нужно переопределить стили в каком-то отдельном контексте придеться такую же длинную цепочку фигачить.
2. Ну и размер файла стилей это не уменьшает.
3. Плюс дополнительные элементы цепочки это лишние циклы поиска браузером соответствии элементов в ДОМ структуре, что ест ресурс. Одна цепочка может не заметна, но полчища таких цепочек уверен могут показать существенную разницу.
4. Потом браузер ведь читает справа налево. В .navbar .navbar-right-menu li.notify-dropdown .notify-list li a .notify-body он сначало найдет все .notify-body, потом начнет проверять какие из них вложены в тег a и искать будет до самого верхнего эелемента пока не найдет или не упреться в бади. Потом начент проверять а какие из них лежат внутри списка li и тд. Куча ненужных обработок.
5. В этом же ключе стоит упомянуть, что селекторы в идеале все должны быть классами. А селекторы теги типа a, li, p, span и тд нужно избегать потому что они неспецифичны, не несут большой ценности, создают лишние цыклы обхода дерева элементов. По той же причине нельзя использовать селектор *.

В идеале вообще не должно быть вложенных селекторов. Почитай про БЕМ методологию. https://ru.bem.info/methodology/ Максимум 2 в крайних случаях три уровня вложенности.

Кнутом его кнутом ну и пряником немного.

Посмотрел. Эээ так у тебя каждый h2 в отдельном блоке значит каждый из них это первый чайлд. И других нет)

Поменяй
.brand-menu:nth-child(even) h2

flex-box где-то так
я там ширину, высоту не сетал

.bigboard-container {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: center;
  flex: 0 0 100vw; //full screen width is minimum
}

.bigboard-text { //set font-size, width or max-width}

.bigboard-button {...}

Можно еще более старым традиционным методом с помощью vertical-align: middle выравнивать блок в самом центре. Можно изучить стили вот тут чтоб понять как попап выравнивается по центру. https://jsfiddle.net/AntowaKartowa/H2N5R/

Ключевые моменты это .popup__overlay:after (фоллбек для старых ие браузеров .popup__valignfix)
и .popup { display: inline-block; ... vertical-align: middle }

Надеюсь ответ понятен и релевантен.