Well, I certainly can’t claim to be an authority on the matter (I’m still learning about coding conventions myself), but I actually lean towards option #1 – a single stylesheet. I’m thinking of a specific implementation of it, though. Instead of having a single break point for each case of screen size you need new styles for, I’d suggest multiple break points – one for the CSS styles of each module where multiple screen sizes need to be addressed.
Ah…that might have been a slightly confusing statement. An example is in order…
Rather than something like:
/*default styles:*/
/*header styles*/
.header-link{ ... }
.header-link:active{ ... }
.header-image{ ... }
.header-image-shown{ ... }
.header-table-cell{ ... }
/*content styles*/
.content-link{ ... }
.content-link:active{ ... }
.content-image{ ... }
.content-image-shown{ ... }
.content-table-cell{ ... }
/*footer styles*/
.footer-link{ ... }
.footer-link:active{ ... }
.footer-image{ ... }
.footer-image-shown{ ... }
.footer-table-cell{ ... }
/*alternate styles for smaller screens:*/
@media only screen and (max-width: 1000px){
/*header styles*/
.header-link{ ... }
.header-image{ ... }
.header-image-shown{ ... }
.header-table-cell{ ... }
/*content styles*/
.content-link{ ... }
.content-image{ ... }
.content-image-shown{ ... }
.content-table-cell{ ... }
/*footer styles*/
.footer-link{ ... }
.footer-image{ ... }
.footer-image-shown{ ... }
.footer-table-cell{ ... }
}
I’d suggest option #1, just implemented as so:
/*default header styles*/
.header-link{ ... }
.header-link:active{ ... }
.header-image{ ... }
.header-image-shown{ ... }
.header-table-cell{ ... }
/*alternate header styles for smaller screens*/
@media only screen and (max-width: 1000px){
.header-link{ ... }
.header-image{ ... }
.header-image-shown{ ... }
.header-table-cell{ ... }
}
/*default content styles*/
.content-link{ ... }
.content-link:active{ ... }
.content-image{ ... }
.content-image-shown{ ... }
.content-table-cell{ ... }
/*alternate content styles for smaller screens*/
@media only screen and (max-width: 1000px){
.content-link{ ... }
.content-image{ ... }
.content-image-shown{ ... }
.content-table-cell{ ... }
}
/*default footer styles*/
.footer-link{ ... }
.footer-link:active{ ... }
.footer-image{ ... }
.footer-image-shown{ ... }
.footer-table-cell{ ... }
/*alternate footer styles for smaller screens*/
@media only screen and (max-width: 1000px){
.footer-link{ ... }
.footer-image{ ... }
.footer-image-shown{ ... }
.footer-table-cell{ ... }
}
(All the classes are placeholders. I’m not very creative…)
Though this means you’ll be doing the same media query declaration multiple times (leading to a bit more code), it’s a lot more handy for testing out single modules, which will overall help the maintainability of your site as it gets bigger. Try adding multiple real styles, more tags/classes/id’s to the example I gave, and maybe add a bit more whitespace to them, and you’ll see soon see how much quicker it is to narrow down and change/append styles (across all screen sizes) in the implementation shown by the second part of the example.
And I credit this answer quite completely to information from Scalable and Modular Architecture for CSS, by Jonathan Snook. (After all, there’s no way a beginner like me would be able to figure out and reason an answer like that all by myself!) As quoted from one of the many relevant parts of that book,
“…instead of having a single break point, either in a main CSS file or in a seperate media query style sheet, place media queries around the module states.”
Though, if by personal preference or other you’d rather not use this approach, then you’re free to go with any of the other options you proposed – after all, Snook himself says that his book “is more style guide than rigid framework”, so don’t feel like this is a coding standard. (Though I feel it should be. XD)