: Should I split a large CSS media queries file into separate files for each screen size? I am working on a responsive design website to deliver content for all screen sizes. I have media queries

@Candy875

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.

Vote Up Vote Down

@Candy875

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.

Vote Up Vote Down

@Angela700

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.

Vote Up Vote Down

@Frith620

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.

Vote Up Vote Down

@Gonzalez347

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.

Vote Up Vote Down

@Deb1703797

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

Vote Up Vote Down

@Angie530

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: stackoverflow.com/questions/16657159/when-using-media-queries-does-a-phone-load-non-relevent-queries-and-images

Vote Up Vote Down