99Problems 99Problems - 1 year ago 67
PHP Question

CSS - all media-querys in one file? or load seperated CSS-files?

what is the better solution:

1) make one CSS-File with all Media-Querys for all supported resolutions

<link rel="stylesheet" href="mobile.css" type="text/css" media="all" />

2) make a CSS-File for every supported resolution and load them in the header

<link rel="stylesheet" href="mobile.css" type="text/css" media="screen and (min-width:240px) and (max-width:639px)" />
<link rel="stylesheet" href="tablet.css" type="text/css" media="screen and (min-width:640px) and (max-width:1023px)" />


I mean, in attempt 2) there are more requests, but is that really that important?

Answer Source

You have to find a difficult balance. On the one hand, you want to keep your requests as low as possible as HTTP1 doesn't allow multiple resources in one request and HTTP2 isn't as common as it will be.

On the other hand, there is parse speed. On a mobile devices filesize matters. It takes longer to parse (=translate your css to an actual result) compared to a desktop machine.

If you save a lot of file data, say 500kb+, the extra request could be worth it (and, when you use your cache properly, will only take one download per cache period). Do try to minimize the number of files, e.g. don't make one for <320, <680, <768, <1024 etc etc. Split in two, maybe three files (unless you have a good reason to do otherwise).

You could also turn it arround. Some developers like to build mobile first, and then scale up to desktop sizes. Instead of changing css when you go smaller, you use screen and (min-width:1024px). Then keep your mobile css in the main stylesheet, and give the browser version the 1024px+ file, which is often more capable so it'll have less effect.

And don't forget about maintainability. You have to maintain the code. If you split everyting into files, you're not making things easier for yourself. If the solutions you implement are minimal, you might want to reconsider, because difficult code will have a worse effect in the long run.