Юрий Иванов

Как раз код под рукой был))
Только вместо моего градиента сделай от черного к прозрачному

.tittle-grandient-cold {
    background: linear-gradient(88.69deg, #61C287 -4.35%, #33BC8E 4.71%, #00B596 13.77%, #00AEA0 22.83%, #00A6AB 31.89%, #009DB5 40.95%, #0094BE 50%, #008BC6 59.06%, #0081CB 68.12%, #0076CD 77.18%, #006ACC 86.24%, #005CC6 95.3%, #004EBC 104.35%, #313CAD 113.41%);
    ;
    line-height: 1;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

Держи

Postimage к примеру, удобный фотохостинг

root: {
--color:#ffffff;
--size:24px;
--height:3em;
}
.h1 {
  color: var(--color);
  font-size: var(--size);
  line-height: var(--height);
}

Микс.

<nav class="nav">
   <ul class="nav__list nav-list">
      <li class = "nav-list__item"><a class="nav-list__link" href="#"></a></li>
   </ul>
</nav>

С переходом на протокол 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) собирающие в один файл, это посредственное решение в лоб грубой силой, дабы не заморачиваться.