Как условно загружать CSS-ресурсы?

Подходы

1. Media в <link>: браузер может отложить неподходящие stylesheet’ы.

<link rel="stylesheet" href="base.css">
<link rel="stylesheet" href="print.css" media="print">
<link rel="stylesheet" href="wide.css" media="(min-width: 1000px)">

1. Динамически создать link/style из JS по фичефлагу или breakpoint.
2. preload + переключение media с print на all после load (паттерн non-blocking CSS).
3. CSS-in-JS / code splitting CSS в бандлере (critical CSS отдельно).

function loadCss(href) {
  const link = document.createElement('link');
  link.rel = 'stylesheet';
  link.href = href;
  document.head.append(link);
  return link;
}

Итог

media на <link> — декларативно; JS — для логики продукта; не грузите тяжёлый CSS, который не нужен маршруту.