Solved

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

LouisArCo
Shopify Partner
4 0 1

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

Accepted Solution (1)

oreoorbitz
Shopify Partner
244 29 129

This is an 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.





Available for freelance. I specialize in speed improvement and theme development.
https://www.upwork.com/fl/orionholmes



You can also contact me directly if you prefer.

View solution in original post

Replies 2 (2)

oreoorbitz
Shopify Partner
244 29 129

This is an 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.





Available for freelance. I specialize in speed improvement and theme development.
https://www.upwork.com/fl/orionholmes



You can also contact me directly if you prefer.

PaulNewton
Shopify Partner
6275 573 1323

@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.

Save time & money ,Ask Questions The Smart Way


Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org