Should the CSS for a theme module be inserted or linked?

Developer Support CMS Development
1

Hello, I hope you’re doing well. I have a question about the best way to include CSS for a module within a theme.

Historically, I’ve typically linked the stylesheet to the module rather than inserting it into the CSS block within the module. However, I’m now considering whether it might be a neater approach to include the CSS directly within the module.

I’m curious about your preference and if there are any advantages to one method over the other. It’s worth mentioning that this theme won’t be distributed outside of our company, in case that has any bearing on your recommendation.

2

Hi @MrCapp,

TL;DR: There’s no “right” or “wrong”. Do it as you want

There are a few benefits but also drawbacks for linking, inserting (and doing both)

1. Linking:

  • If you link your CSS files through the right sidebar(Design-Tools) or via the meta.json(local dev/CLI) your CSS will be loaded only once per page - regardless how often you’ll use the module on this particular page therefore it’s a lot better for performance and maintenance

2. Including

  • Including the CSS into the module.css (Design-Tools or local) is basically the same as linking but has a (big) drawback: If you want to use some parts in other modules you have to add it over and over again and again. Therefore you can have some hard times if you decide to change something at a later moment. You’ll need to open every module and basically copy/paste the changed part

3. Mixing

  • Combines those two options. Basically you create some CSS files that contain elements that are used by several modules and link those. Module specific CSS can be written into the module.css (file).

My personal approach (completly overengineering in most cases) is creating a lot CSS files, link those to the module(s) and working with a bunch of booleans/choice fields to trigger CSS classes.

An example:

I have a _utils.css file with several padding, margins, font-sizes, colors that are available in every module (and template)

In the module I have something like

Choose your background(choice field):

- Primary / primary

- Secondary / secondary

- Tertiary / tertiary

and the html+hubl looks like this

<div class="{{module.styles.background}}-bg">
...
</div>

The rendered output looks like this:

<div class="primary-bg">
...
</div>

the .primary-bg class in my _utils.css looks a bit like this:

.primary-bg{
background-color:{{ theme.colors.primary.css }};
}

best,

Anton

3

Thanks Anton - that confirms what I’m doing. I thought there might be some advantages to changing my approach with the theme, but it looks like I’ll just stick with what’s working.