How to load only necessary CSS styles in the pages?

Hello, friends!
Lately, I have worked a little bit with AstroJS, where you can write HTML (or JSX) and styles within one file, and when you build the site, in the static pages only necessary styles will be imported.

How I can implement something similar with GoHugo?
I have 2 unique categories, like: blog and shop. In Hugo they called like sections, right? Within the folder content/blog and content/shop.

And those 2 categories will have different designs/styles for the page. And having only 1 global stylesheet is not an option for me.

Can I create 2 different CSS files, like CSS/blog.css and CSS/shop.css, then import them within my one common header something like:

   {{ if eq .Section "blog" }}
     {{ $style := resources.Get "css/blog.css" | minify | fingerprint }}
     <link rel="stylesheet" href="{{ $style.Permalink }}">
   {{ end }}

Am I thinking in the right direction or not?

Sounds about right to me.

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.