OS 2.0 - Multiple CSS Files (one per section)

[mrmarge]

Hey there,

We've come across the fact that the new OS 2.0 Dawn theme loads CSS files within the body. Each section has its own CSS file.

However I've seen that most updated themes and also almost all other Shopify OS 2.0 websites use the standard implementation of CSS files within the head section.

In my opinion separate CSS files per section might lead to loading files multiple times (if a section is uses more than one time) plus it would affect the Cumulative Layout Shift as well.

Can someone elaborate on why the Dawn Theme works like this any why almost all other Themes don't?

Thanks!

Best

Mark

[KetanKumar]

@mrmarge 

yes shopify 2.0 allow  each section different css code add theme setting its easy

[Philip_Sole]

I thought this was a bit weird too. I think the file will be cached by the browser so won't be downloaded over the network twice. This seems to be the case when looking at the Network tab in Chrome developer tools. However, according to this Stackoverflow answer, the browser still needs to parse the file again which has a CPU overhead.

I guess it's a tradeoff between that approach or loading and parsing CSS unnecessarily if a section isn't used but it's CSS is included in a "monolithic" CSS file.

The Shopify CDN uses HTTP/3 which allows the browser to download multiple resources simultaneously. So this reduces the concern about more network requests. 

It would be good, I think, to be able to detect in liquid if a section had already been included to avoid parsing the CSS twice. But I don't think you can create a global liquid variable from a section that could store that data. I guess there will be some awkward workaround for that.