Score:-2

Libraries, CSS, and conditional loading

bn flag

In looking at the attached screen shot from mytheme.libraries.yml, I see 'base:', 'component', 'layout', 'theme', and so on.

Do these designations represent/do anything in practice? Or is this just for organization of the libraries.yml file, or does this imply where/when these CSS files load? For example, form.css only loads when a form is present.

I can see this happening in modules, but in the theme.libraries file?

Also, why isn't a 'yml' or 'yaml' tag available here? y

Screen capture of a libraries file of a theme.

leymannx avatar
ne flag
Please don't add screenshots of code. Please paste the code and use the code highlighting functionality. Thank you
Kevin avatar
in flag
I don't totally understand the question, what is a libraries.twig file? Libraries are declared in a libraries.yml file in a module or a theme.
blur avatar
bn flag
Sorry - I'll post the code from now on and I'll also make sure I get my file extensions straight. Oops. thanks for the heads-up.
Score:2
ru flag

base, components etc. are SMACSS inspired categories, a method of organizing CSS in large scale projects (in Drupal this also means load order). And YAML in here makes no sense, you can't add YAML to a HTML document.

Score:1
in flag

You should review the Adding stylesheets (CSS) and Javascript (JS) to a Drupal module and Drupal theme docs. Unfortunately, there's information in one that's not in the other, but I believe all of the information pertaining to defining a library, i.e. creating a libraries.yml file, applies to both modules and themes.

Looking at mytheme.libraries.yml, I see 'base', 'component', 'layout', 'theme', and so on. Do these designations represent/do anything in practice?

Yes, they do stuff. Primarily, they change the order that the files are loaded (lower weights are loaded first). It's also a good way to organize your CSS (these keys only apply to CSS, not JS) conceptually so as to make it easier to find, debug, and fix any issues or make changes.

From the docs:

[base, layout, component, state, theme keys] indicate the style type the CSS file belongs to.

You can set CSS weights with 5 different levels of styling:

  • base: CSS reset/normalize plus HTML element styling. Key assigns a weight of CSS_BASE = -200
  • layout: macro arrangement of a web page, including any grid systems. Key assigns a weight of CSS_LAYOUT = -100
  • component: discrete, reusable UI elements. Key assigns a weight of CSS_COMPONENT = 0
  • state: styles that deal with client-side changes to components. Key assigns a weight of CSS_STATE = 100
  • theme: purely visual styling (“look-and-feel”) for a component. Key assigns a weight of CSS_THEME = 200

This is defined by the SMACSS standard. So here if you specify theme it means that the CSS file contains theme related styling which is pure look and feel. More info here. You cannot use other keys as these will cause strict warnings.

These keys do not provide any conditional loading of the files. They're all always loaded when the library is included, the keys only change the order in which the individual files are loaded. (If you're using aggregation, they will all be in the one file, but the order will be preserved.) To conditionally load files, you'll need to create separate libraries (you can define multiple libraries in the same libraries.yml file) and then attach the individual libraries only when you need them.

There are a number of ways to attach a library to a page, see the Attaching a Library to Page(s) section of the module and theme docs noted above.

blur avatar
bn flag
Thank you for the information. I wish I could find some templating tutorials that go beyond 'first, install barrio...' I'd like to get into preprocess and conditionals. Do more with templates and less with modules.
mangohost

Post an answer

Most people don’t grasp that asking a lot of questions unlocks learning and improves interpersonal bonding. In Alison’s studies, for example, though people could accurately recall how many questions had been asked in their conversations, they didn’t intuit the link between questions and liking. Across four studies, in which participants were engaged in conversations themselves or read transcripts of others’ conversations, people tended not to realize that question asking would influence—or had influenced—the level of amity between the conversationalists.