Елена

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

Но даже сейчас лучше разделить стили блочной разметки от украшательств и грузить их раздельно. Подключать media queries CSS, не в CSS а в HTML отдельными файлами, указанием атрибута media:

<link rel="stylesheet" media="all and (min-color-index: 256)" href="..." />

А ещё лучше, подключать с каждой страницей только те стили, которые на ней используются :)

Чтобы это можно было сделать, верстальщик должен сделать раздельные сборки:

• Стартовую таблицу стилей которая грузится на всех страницах. Сюда входят: сброс браузеров, хеадер, футер (если он fixed внизу видимого), стили видимого при загрузке домашней страницы. ТОЛЬКО то, что видно на самом большом экране без элементов которые появляются во время прокрутки.
  
• Основную таблицу стилей для разметки страниц контента. То что входит во все страницы контента, без специфичности. Ну и не фиксированный футер тот, что после контента. Эти стили должны быть загружены уже после загрузки основного контента.
  
• Специфичные стили для отдельных страниц. Эти грузятся отдельно на каждой странице свои стили и по надобности объединяются с Основной разметкой контента.
  
• Таблица стилей форм. Все формы на сайте должны грузится с одной таблицы. А не быть специфичными для разных страниц. Формы это не контент!!! У форм ОБЯЗАТЕЛЬНО должна быть отдельная таблица стилей. Она подключается при включении формы генератором форм на бекенде. Даже строка поиска в хедере. Все элементы input, textarea, option должны быть описаны в отдельной таблице стилей. Эти стили объединяются с основной или стартовой таблицей как будет надо.
  

P.S. Уточню по Основной таблице стилей фактически сборок должно быть минимум 6 (мобильная, планшетная, малая, средняя, ретина, печатная).
Верстка ВСЕГДА должна быть мобайлфёрст. И сновная таблица должна быть на мобильной версии сайта. А потом ёё расширять и естественно подключать атрибутом media по надобности. Сборка в порядке возрастания сначала узкоспециализированная таблица для мобильников. Для планшетников подключается только отдельный файл с планшетной и мобильной таблицами стилей собранные в кучу. И так далее...

P.P.S. Cборщики (gulp) собирающие в один файл, это посредственное решение в лоб грубой силой, дабы не заморачиваться.

Может кому пригодится: &tvFilters=`dada==[[*dada]]`
В этом случае выводятся все документы, в которых значение в TV "dada" равно значению в текущем документе.

Хранение информации и ее вывод на странице - разные вещи.

Есть лендинг на 10 экранов. Если инфы много, значит 1 экран - 1 ресурс. Если мало и там все просто, то можно использовать migx. Юзать ClientConfig для заголовков страниц и картинок - так себе затея. У вас есть 10 заголовков и 10 картинок. В ресурсах у вас есть для этого pagetitle и image (в итоге всего 2 поля, легко вызвать в шаблоне/чанке, легко обработать), а в ClientConfig-е придется создать 20 ключей. К тому же усложнится процесс редактирования блока, когда контент и картинки будут в ресурсе, а заголовок нужно будет править где-то в другом месте. Используйте ClientConfig для данных, которые будут одинаковы в каждом блоке (телефон, почта, адрес).

Вывод инфы - все зависит от того, что и куда нужно выводить. Все поп-апы можно вызывать аяксом, что бы они не грузили страницу (куча готовых библиотек). Все изображения оптимизировать (например тут: ) превьюшки делать через ptumb, а не css-ом размер менять. )) Сам контент, если его ну прям очень много, можно подгружать тоже аяксом (допустим, при скроле страницы).

Избегайте большой вложенности чанков, сложных условий. Лучше используйте femon, он работает шустрее. Не забывайте, что стандартный шаблонизатор работает наружу, то есть например при условии [[+id:is=`1`:then=`[[$da]]`:else=`[[$net]]`]], шаблонизатор возьмет код обоих чанков, а только потом выведет тот, что подходит под условие, как результат (если в чанках кода много) - более медленная загрузка страницы.

Вы хотите, чтобы окно появлялось в текущем вьюпорте, но при этом его можно было проскроллить?

btnShowModal.onclick = e=>{
  modal.style.top = window.scrollY + 50 + 'px' // текущее положение скролла + отступ
  modal.classList.add('active') // показываем
}

демка: https://jsfiddle.net/6uLm9hs5/show/light/