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.

  • Do grunt/webpack/whatever plugins exist to take a single css file and split it into multiple files separated by media query? Then you could arguably get the ease of development afforded by one monolith file and also the speed optimization of separate files. Commented Dec 30, 2015 at 0:59

8 Answers 8


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

  • In that post you linked, do you know what he means by "this is a limitation of the CSSOM"? Commented Jul 21, 2014 at 16:36
  • 1
    The CSS Object Model - dev.w3.org/csswg/cssom - I believe this defines how CSS should be handled, and so I think the limitation he refers to will be not having a model which handles such styles in a more bandwidth-saving way.
    – RichardB
    Commented Jul 21, 2014 at 17:30
  • 4
    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
    Commented Jul 30, 2015 at 14:47

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.

  • 3
    It's worth noting that if you're using the <link rel="stylesheet" /> tag for all of your media query specific files, you won't be able to prevent the browser from downloading them. You would have to use browser sniffing on the server side or using JavaScript to examine the viewport dimensions and inject the appropriate style sheets. Neither of these are good choices.
    – cimmanon
    Commented Jul 21, 2014 at 16:28
  • 1
    I'm a bit surprised, but you are right - I thought adding the media-attribute to the <link>-tag would have prevented loading non-matching stylesheets. Why do browsers do that? This is of course the single most important reason to not split the stylesheets.
    – Jost
    Commented Jul 21, 2014 at 18:07
  • They do it because your screen can change, what if you're on a mobile and you rotate it from portrait to landscape, suddenly your screen width is different. Or on the desktop you could resize your browser window, or drag your window onto another screen if you have a multiple monitor setup. If the browser didn't download all CSS assets in advance there would be a delay in re-rendering the page if and when any of the above actions occur
    – MrCarrot
    Commented Jul 4, 2015 at 18:42
  • It's better to have them split. Most browsers these days are spdy browsers (your site it https and spdy right like it should be) and with spdy multiple connections are multiplexed into the same connection so the number of files don't matter now. Also browsers will put non matching media queries css files with a lower priority to download and more importantly won't BLOCK the page render.
    – dalore
    Commented Jul 30, 2015 at 14:49

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.

  • 1
    Classes named after the style are bad form. Might as well just put a style attribute in if you are going to that. Better to name the classes logical. Like .important
    – dalore
    Commented Jul 30, 2015 at 14:50

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.

  • I have heard it claimed that if you really don't want your async scripts to potentially delay rendering, execute them on the window.onload event instead of using async. Commented Dec 30, 2015 at 0:57

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.


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)">

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)

//sheet 2 (mobile device 768 px)

//sheet 3 (mobile device 480 px)

//sheet 4 (desktop size 1024 px)

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


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.

  • 2
    He has already written 30kb of CSS, how could switching to bootstrap possible be beneficial? Commented Jul 21, 2014 at 14:42
  • Putting it that way, yes I agree 30kb of css is a mission to redo. I would simply copy and paste it into different stylesheets, all depending on how it is structured you could duplicate and rename the css files and remove all the unnecessary parts. Commented Jul 21, 2014 at 14:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.