When defining a *.libraries.yml for a theme, each library will reference the location of individual CSS or JS files and be organized using the SMACSS (https://smacss.com/) style categorization:

• Base: This defines CSS reset/normalize plus HTML element styling
• Layout: This defines the macro arrangement of a web page, including any grid system
• Component: This defines the discrete, reusable UI elements
• State: This defines the styles that deal with client-side changes to components
• Theme: This is purely visual styling for a component

In most cases, a simple library reference will follow the theme categorization. For example, if we want to create an example.libraries.yml file that included assets for CSS and JS, we would create a library that pointed to our assets, as shown here:

libraryname: 
  css: 
   theme: 
      css/style.css: {} 
  js: 
    js/scripts.js: {} 

We would then reference the library within our example.info.yml configuration simply by adding the following:

libraries: 
  - example/libraryname 

This would result in Drupal adding both CSS and JS files to every page contained in our library. Where this becomes powerful is in the management of assets, as we will need to make modifications to our example.libraries.yml file only if we ever need to add or remove assets.