I'm a back-end engineer who works on a small team so occasionally needs to do some front-end. I like to develop a good workflow and project structure before I start anything, so I'm wondering about creating a responsive front-end for a web app.
What's a best-practice way to strcture CSS for creating responsive websites that need to "scale down" for smaller screens? Specifically: do you create the mobile version first, then expand the code with min-width media queries in the CSS? Or do you do the opposite, creating the desktop-resolution version first?
Secondly, do you define multiple element selectors and definitions in the same media query? Or do you define a media query for each element and selector? It would seem that the second method would make for more readable code perhaps -- although it's certainly more frustrating to "tweak" a working site to create a new version with media queries rather than simple fence-off the old settings in one media query and re-style the necessary parts from the new version from scratch.