Pros and Cons of Combining CSS/JS files or loading contextually?

As Drupal documentation says here: Adding stylesheets (CSS) and JavaScript (JS) to a Drupal 8 theme,

Drupal uses a high-level principle: assets (CSS or JS) are still only loaded if you tell Drupal it should load them. Drupal does not load every assets on every page, because it slows down front-end performance.

You don't need to worry about loading libraries (CSS/JS) contextually. Drupal can load individual libraries for a certain block, or when a certain node type is being displayed. That's the purpose of the [theme-name].libraries.yml file, you can mention the specific blocks and page in there and tell it load the required library for that part.

You can attach the library to all pages, to specific Twig templates, or to a render element in a preprocess function.

For instance for a maintenance page:

maintenance-page:
 js:
  js/mobile.install.js: {}
 css:
  theme:
   css/maintenance-page.css: {}
 dependencies:
  - system/maintenance
  - thunder_admin/global-styling

Or for certain blocks or part of your page:

vertical-tabs:
 css:
  component:
   css/components/vertical-tabs.css: {}
dropzonejs.widget:
 css:
  component:
   css/components/dropzonejs.widget.css: {}

You can also use hooks like THEME_preprocess_HOOK() function in the .theme file. For instance, if you want to attach JavaScript to the maintenance page, the "HOOK" part is "maintenance_page", and your function would look like this:

function fluffiness_preprocess_maintenance_page(&$variables) {
    $variables['#attached']['library'][] = 'fluffiness/cuddly-slider';
}