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

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

i'm in process of re-writing css our website, previous 1 became huge bloat (one of css files along approximately 180kb). normal?

i'm interested in finding out productive & efficient way of storing css code website. because of nature of devices nowadays, don't think possible write media queries targeting devices (e.g. responsive.smartphone.landscape, responsive.tablet.portrait etc etc). furthermore, using breakpoint methodology, lot of media queries overlap.

i'm considering writing css files media queries, separate ones media queries overlap. how can cut down bloat & not have send 200kb css files smartphones or tablets, when little code of file relevant device itself?

for smartphones, etc, move media queries with-in css files link elements shown below. way you're loading single css file each.

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

i don't think ie8 or less back upwards media queries should provide fallback:

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

css responsive-design media-queries device-orientation