Use separated style files for mobile and desktop?

[coditive-przemek-h]

Guys, what do you think about workflow change that might impact performance results? I'm talking about creating separate files for mobile and desktop. Then load mobile.css on mobiles and desktops and desktop.css on desktops.

[coditive-tomek-g]

For me it's a very bad idea, could you explain it more as an example for a small component, for example, button? In this behavior, will we need to create two separate files for each component and duplicate part of the styles from the mobile file to the desktop file?

Do you have any articles that show the pros of this approach?

[coditive-przemek-h]

I've forgot to mention that I'm saying about blocks - not global components :D But I'm also not saying about duplication. This is how it would work:

• Mobile: mobile.css
• Desktop: mobile.css and desktop.css

So desktop.css includes only styles that should be applied to desktop. Other base styles are placed in mobile.css. But to not confuse users by names we can call them base.css and additional.css or something other.

[coditive-tomek-g]

I'm still thinking it's a bad idea :D. Why do you want to do this, you said about the performance results, but how it impacts the performance? Based on my experience, the mobile styles are almost always "bigger" than the desktop styles, where in most cases we need to just overwrite some styles from the mobile. Additionally, for the desktop we'll need to load two files, so probably it will be bad behavior for the performance :D.

[coditive-przemek-h]

• We can reduce render blocking resources impact by making chains smaller
• we can reduce reduce unused css impact by loading only what's really needed
• we can reduce Avoid enormous network payloads impact
• we can improve LCP and FCP scores

Additionally, for the desktop we'll need to load two files - Nope. We use HTTP/2 so assets are loaded at the same time and there won't be performance problems because finally the size of chunks will be the same :D

[coditive-tomek-g]

Hmm, I think most of these problems are connected with badly written styles. If the styles are written correctly then problems like reduce unused CSS shouldn't exist. Additionally, how many kb of files we will save using this behavior?

Could you show any tests with this behavior and without them? For example on a very simple page with only one block, without the basic files like normalize/reset, etc. Just a simple website with a classic block, for example, a hero or CTA with the classic count of the styles.

I just would like to know how such a change affects, for example, the result in Google PSI. In my opinion, this will have practically no effect on the result, but it will be very uncomfortable for the developers.

[coditive-przemek-h]

Sure, I'll try to do that, but not now :D To summarize - can you list all your points for no? I'll check them and present the report :D

[coditive-tomek-g]

IMO it'll have no impact on the results and it's very bad for the developers and practices, so I can't prepare a list of the points for no, because I don't see any advantages to this approach. So please make a test and show the results, if it will have a big impact on the results then we can discuss about it :D.

[coditive-przemek-h]

So for example - smaller chunks for mobile devices (that not loads desktop styles at all) is not an advantage?

I'm not saying that it will have big impact. I think that the impact won't be big but will be. If we can maximize chunks size from the beginning with small effort - it is only advantage for us in the future :D