Best practice: stylesheets: small devices

Question

When writing cascading styles for sites we can specify for small devices using media queries

e.g. @media only screen and (min-width: 480px) and (max-width: 767px) {}

This can be entered at the specific page level (e.g. .html), in the style-sheet link, or alternatively in the .css itself.

Is it better practice to provide entirely separate stylesheets, have the primary stylesheet load and be overwritten by the "mobile only" version, or have selectors overwritten within the stylesheet itself? (presumably styles for layout will be mutually exclusive)

Also should you attempt to exclude smaller devices from reading the non-applicable styles in the first place, to avoid unnecessary work?

Finally, should developers avoid these questions altogether by focusing on responsive styles that are unlikely to be non-compatible with smaller devices?

Answer 1

I wouldn't load an additional stylesheet -- that's just an unnecessary request. You should override styles below the styles in your main stylesheet using @media queries.

Take a look at the Boston Globe's stylesheet - http://bostonglobe.com/css/html5reset.css,globe-globals.css,globe-masthead.css,globe-nav.css,globe-nav-menus.css,globe-saved.css,globe-main.css,globe-footer.css,globe-print.css