I'm working on my first responsive site and have read numerous articles but can't find an explicit answer to my question.
I have created and coded 3 designs at this point. The overall site is has a fluid main column and a fixed sidebar. The header and footer are fluid. After a cutoff point it will go from 2 column to one, with some additional changes to go to smart phone size. I want one style sheet. Having read several pros and cons, since this is my first responsive site I will be making the desktop design the "default" and want to use media queries to change styles for smaller sizes.
I have several styles that won't change from size to size, and a handful of styles that do change.
Do I go ahead and do my entire style sheet for the desktop, then add the media queries at the bottom? (Before the print styles or after?) Or do I mix the media queries in throughout the style sheet, wherever the "default" style is?
Thanks!
I've been battling this about my head for a while, as well. Some of my sites have one big handheld- or print-only section at the bottom, some have the relevant media queries right after the selectors they affect. As far as I've seen, neither way has any impact on rendering performance one way or the other (if there is one, I haven't perceived it).
My answer is to just use whichever you feel is easier to read. If this is part of a bigger project, consult any team members who also work on the CSS and ask them which they prefer.