Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

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.

share|improve this question

7 Answers 7

up vote 12 down vote accepted

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

share|improve this answer
    
In that post you linked, do you know what he means by "this is a limitation of the CSSOM"? –  DisgruntledGoat Jul 21 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. –  Richard B Jul 21 at 17:30

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.

share|improve this answer

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.

share|improve this answer
2  
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 Jul 21 at 16:28
    
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 Jul 21 at 18:07

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.

share|improve this answer

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.

share|improve this answer

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.

share|improve this answer

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.

share|improve this answer
2  
He has already written 30kb of CSS, how could switching to bootstrap possible be beneficial? –  Steve Sanders Jul 21 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. –  Regardt Ogies Myburgh Jul 21 at 14:50

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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