Is it better to add style of a section inside of the section itself, or in base.css?

[LouisArCo]

As the title says, what's better for the speed and simplicity of the development when it comes to section styles?

[oreoorbitz · Accepted solution]

So there are two factors to keep in mind

Render blocking resources will still be impactful even if file size is small,and have multiple small css calls can just be a negative for speed, but not as bad a huge render blocking css file.

Css file size

So having scoped sections will result in smaller CSS file size, with a single css file, it's just harder to keep track of what's being used or not. Even if you are super precise, and make sure everything is only whats needed when you write the single css file, changes will be made in the future, and orphaned css code will come about. Having a smaller css file is better  if the css is render blocking, and better for Time To Interactive

On the other hand, if you have 10 1kb render blocking css files, those will still imapct speed, mainly becuase of the whole look at up time and such,not so much download speed, but, the render blocking css being smaller means it will have less of an impacton performance then a single css file

As for simplcity of development, many build systems i've seen break up css files into small modules, for ease, then compile them into a single huge bundle, so I think  leaving the css files as small modules isn't so bad for developer clarity.

[PaulNewton]

---

@LouisArCo wrote:

what's better for the speed and simplicity of the development when it comes to section styles?

---

For simplicity just put styles in the sections {% stylesheet %} tag and move on :

The content from {% stylesheet %} tags across all sections is concatenated into a single file by Shopify, and then injected into the theme through the content_for_header global Liquid object.

~ https://shopify.dev/themes/architecture/sections/section-assets#stylesheet 

---

Afaik If a section is enabled CSS is served if disabled CSS shouldn't be served, I haven't tested in awhile always validate and double check for premature pre-render silliness.

Note: Other liquid contexts cannot check for the existence of a section so a styles.css.liquid cannot conditionally include rules based on a section you have to use other means such as theme settings, or {%capture%} silliness.

Not simple: if the section is offscreen, below the fold ,use the section rendering api to fetch the section in a page context ,such as an ajax template, with logic that returns ONLY the relevant <style> data to be injected.