title: Where to put CSS3 media queries?
body: <p>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:</p>
  
  <ol>
  <li>Put all media queries together in a separate stylesheet or section of the main stylesheet.</li>
  <li>Put media queries below 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. </li>
  </ol>
  
  <p>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). </p>
  
  <p>Any thoughts on this?</p>