How should I divide up CSS files to support multiple devices?

Question

I'm in the process of re-writing the CSS for our website, as the previous one became a huge bloat (one of the CSS files along was approximately 180kb). Is that normal?

I'm interested in finding out what is the most productive & efficient way of storing CSS code for the website. Because of the nature of devices nowadays, I don't think its possible to write media queries targeting devices (e.g. responsive.smartphone.landscape, responsive.tablet.portrait etc etc). Furthermore, using the breakpoint methodology, a lot of the media queries will overlap.

I'm considering writing CSS files by media queries, with separate ones for media queries that overlap. How can I reduce the bloat & not have to send 200kb CSS files to smartphones or tablets, when only a small code of the file is relevant to the device itself?

Answer 1

For smartphones, etc, you could move the media queries from with-in the css files to the link elements as shown below. This way you're only loading a single css file for each.

<link rel='stylesheet' media='screen and (max-width: 320px)' href='css/mobile.css' />
<link rel='stylesheet' media='screen and (min-width: 321px) and (max-width: 768px)' href='css/tablet.css' />
<link rel='stylesheet' media='screen and (min-width: 769px)' href='css/desktop.css' />

I don't think IE8 or less will support media queries like this so you should also provide a fallback:

<!--[if lte IE 8]>
<link rel='stylesheet' media='screen' href='css/desktop.css' />
<![endif]-->