I am having a philosophical debate with myself over the best place to put media queries within style sheets. I am attempting to structure my CSS modularly (like OOCSS or SMACSS, etc). Given that context, I see two choices:
1. Put all media queries together in a separate stylesheet or section of the main stylesheet. 2. Put media queries next to their base counterparts. For example, if I have a module called "news-item", I could put any necessary media query styles right below the definition of that module.
I am leaning towards the latter, but it would mean I'd have many more separate media queries (separate ones for each logical block of CSS requiring a responsive adjustment).
Option 2 sounds like a world of pain having to trawl through your stylesheets when you want to add a new media query to suit a different device your client has just decided is essential to support.
I always put all media queries in a block at the very end so they will override the relevant style further up the sheet.
Am now using SASS so I put them either all into one partial which called at the bottom of the main file or into separate partials if the complexity warrants it.
For development purposes only, I see no problem in having separate stylesheets for different queries if it helps your workflow, but on deployment combining them into one with the size specific query versions at then end.
1. Put all media queries together in a separate stylesheet or section of the main stylesheet.
2. Put media queries next to their base counterparts. For example, if I have a module called "news-item", I could put any necessary media query styles right below the definition of that module.
I am leaning towards the latter, but it would mean I'd have many more separate media queries (separate ones for each logical block of CSS requiring a responsive adjustment).
Any thoughts on this?
I think I lean towards the former, but I think it might come down to personal preference.
I always put all media queries in a block at the very end so they will override the relevant style further up the sheet.
Am now using SASS so I put them either all into one partial which called at the bottom of the main file or into separate partials if the complexity warrants it.