drupal-8theming

What is standard approach to add and manage stylesheets (CSS) files in Drupal 8 with Libraries?

When developing modules or theme for Drupal, there inevitably comes a time when we may need to include an external CSS or Javascript plugin or library for our project.

Drupal assets management is a little complex and make me confused, I read
Adding stylesheets (CSS) and JavaScript (JS) to a Drupal 8 theme and
Adding stylesheets (CSS) and JavaScript (JS) to a Drupal 8 module,
but it doesn't explain that clearly and there are some question about it yet.

How are processed these libraries and stylesheets added to a web pages? are they added in the order of SMACSS category (base, layout, component, state,theme)?
For example consider the following structure:
ThemeName.libraries.yml

library-A:
  css:
    # The SMACSS category.
    base:
      # The path to the css file.
      assets/css/stylesheets-1.css: {}
    theme:
      assets/css/stylesheets-2.css: {}

library-B:
  css:
    base:
      # The path to the css file.
      assets/css/stylesheets-3.css: {}
    theme:
      assets/css/stylesheets-4.css {}

In library-A or B (Each alone): how i should define category? First should come Theme and then base or reverse? What is criteria?

In totally library-A and B: witch of them Load first? library-A or B? what respective is correct?

Solution

  • for 1: more info here, basically theme will overwrite base although weights are inverted; now that is a guideline not a rulle so it really depends on what are you writing

    for 2: it really depends on where and how you load them,

    ex to load libraries it inverted order: