Should I split a large CSS media queries file into separate files for each screen size?

Question

I am working on a responsive design website to deliver content for all screen sizes. I have media queries for 5 different "steps", and the CSS file is around 30 Kb.

Would it be better to split this into separate files and make them similar to this:

<link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='css/medium.css' />

or should I keep them in one CSS file?

Update: I just wanted to add, that my main concern was cross browser/device page opening/rendering speed, not ease of development.

Answer 1

I think it really depends on what you find easiest for development and what helps you keep a tidy stylesheet.

The only real downside I can think of in splitting would be that should an element's attribute appear in all your stylesheets, you would have to update 5 separate files to change it (rather than it appearing side-by-side in one place).

According to the answer on this post, browsers will download all the stylesheets regardless, so splitting on resolution is not a bandwidth-saver: https://stackoverflow.com/questions/16657159/when-using-media-queries-does-a-phone-load-non-relevent-queries-and-images

Answer 2

Its probably best to have only one CSS file, but to minify and gzip it. Assuming your 30KB are before doing that, you will probably get the file size down to about 5KB with minification (white space removal) and gzipping.

Splitting up will probably get you some more speedup, but only under some conditions.

• You'd have to make sure that only one stylesheet is loaded at each time - otherwise you'd need two or more HTTP requests, which have an overhead themself, which would at least partly negate the gain from the smaller file size. To do this, it is not enough to just split the stylesheet and insert multiple <link>-tags with different media attributes, Browsers seem to load all <link>ed stylesheets regardless of the media queries (thanks to @cimmanon for this info, didn't know that).
• The number of CSS rules shared between the style sheets must be small - otherwise each of the multiple stylesheets would need to contain all common rules and would thus have almost the size of the original.
• You use a CSS preprocessor (or something similar), so it is managable to have the same code pieces in 5 stylesheets.

Also: Don't optimize prematurely. Only do so if you have performance problems.

Answer 3

It slightly depends on what you want to achieve: are you trying to make your page load faster or are you trying to make developing easier?

If you target on the latter, than you could use multiple sheets, but thats all a matter of preference. I find it the easiest to use one big file since this gives you an overview of all the styles you've declared.

If you want a faster loading page than your best bet would be to minimize the amount of requests, since a request overhead is quite big. Further you could keep a development version for yourself and serve a minimized css to the web (I find YUI a good method: http://www.refresh-sf.com/yui/).

Further I would try to optimize the css itself. You could try to merge classes that are very similar, for example:

.bold-and-italic { font-weight: bold; text-style: italic; }

Can be converted into:

.bold { font-weight: bold; }
.italic { text-style: italic; }

The only thing is you have to change the html slightly from <span class="bold-and-italic">foo bar</span> into <span class="bold italic">foo bar</span>

I can stronly suggest you to take a look at Bootstrap (http://getbootstrap.com), these guys have done a great job in splitting up classes into multiple 'sub-classes'.

I hope this helps.

Answer 4

You should split your CSS files based on media queries because CSS files are render blocking.

When the browser is constructing your DOM, it has to first wait and load all your CSS files. You will reduce your page load time if some of your CSS files are only loaded based on certain media queries.

This also goes for adding async to a JavaScript script tag; ex.: <script src='myfile.js' async></script>.

The DOM doesn't have to wait for your JS file to load. Only add async if the construction of your DOM does not need any of that JavaScript at onload.

Answer 5

I'd be inclined to say this.

For production, always keep them in one file; the reason being that it's more efficient for the browser, and that should be your primary interest (IMO) when moving from development to production.

Development's a different kettle of fish. I tend to split Media queries up so that they're by whatever element, eg:

.foo { // .. some css }
.foo:hover, .foo:focus { // hover css }
@media screen and (max-width: 400px) {
    .foo { // .. some differentcss }
}

As generally if I'm changing an element, I don't want to have to hunt around all over the place for the CSS (although you can use something like grep...).

But, one thing I would say is that it's worth considering the site itself, the development process and soforth. If you genuinely think that it will be worth separating them in to screen size-based files, give it a go. Make a copy of the site (if possible), have a play around with the copy - if it makes it easier, use that. You don't need to follow a one-size-fits-all paradigm of how to develop a website.

Answer 6

As @dalore mentioned in a comment, you might want to split the css by media query to reduce the amount of render blocking resource

While it's not a download saver it is in a way. A browser will prioritise matching media queries links over non matching. A matching css file will block the page rendering whilst a non matching gets a lower priority by the browser to download and doesn't block the page rendering at all. Also once it's split up you can use js to conditionally download if you want to save and bandwith. – dalore Jul 30, 2015 at 14:47

Then you would need to add the media attribute to the link or style tag as mentioned on this article

Here is the example taken from the article

<link href="style.css" rel="stylesheet">
<link href="print.css" rel="stylesheet" media="print">
<link href="other.css" rel="stylesheet" media="(min-width: 40em)">

Answer 7

Simple: use 1 stylesheet and just add comments to them to make it easier to find and change the CSS styles e.g.:

//sheet 1 (mobile device 800 px)
code

//sheet 2 (mobile device 768 px)
code

//sheet 3 (mobile device 480 px)
code

//sheet 4 (desktop size 1024 px)
code

If you want you could use multiple stylesheets and call them for each specific size.

Answer 8

I would rather look at Bootstrap. It is 1 CSS file that contains all the CSS. It works on almost 99% of browsers and is extremely responsive.

Click on the live demo an zoom in (Ctrl + = zoom in, Ctrl - = zoom out, Ctrl 0 = normal) or open it on your mobile to see how it renders.