Is it better to define css for all @media in one css file?

Question

As this article suggesting

http://www.456bereastreet.com/archive/201002/css_efficiency_tip_use_a_single_stylesheet_file_for_multiple_media/

or different external CSS for different media would be better option?

in terms of maintainability, site performance.

Answer 1

You could use media-dependent @import rules like so:

@import url("print.css") print;
@import url("projection.css") projection, tv;

it should work in everything but IE5-7 (as per: http://www.westciv.com/wiki/CSS_Guide:_Media#mediaspecific ) I can't test for IE8 so you might be disappointed there too.

it would result in a very small initial CSS load, then upload just the needed stylesheets based on media.

Answer 2

Combined Style Sheet Pros:

• Optimal/Fast
• Good reduction in size after compression
• and yes fewer http requests

Combined Style Sheet Cons:

• Messed up; all different style sheets in one place
• Difficult to maintain
• Less readable

Answer 3

Basically, if you can programmatically add CSS files to your client based on the media (as long as you only send ONE css file in the end), then yes, build multiple CSS files based on the @media.

If you cannot add css programmatically, then I would suggest combining them into a single css file (since you have to send them all to the client regardless), thus reducing the number of http requests by the client.

fewer http requests = faster page loads.