title: Defining CSS media queries within selectors
body: <p>Are there any issues (performance is my primary concern) if instead of defining css selectors within media queries (example 1), you define media queries within css selectors (example 2).</p>
  
  <h1>Example 1 - css selectors within media queries</h1>
  
  <pre><code>@media (min-width: 600px) {
    .foo { ... }
    .bar { ... }
    .hello { ... }
    .world{ ... }
  }
  
  @media (min-width: 1000px) {
    .foo { ... }
    .bar { ... }
    .hello { ... }
    .world{ ... }
  }
  
  @media (min-width: 1500px) {
    .foo { ... }
    .bar { ... }
    .hello { ... }
    .world{ ... }
  }
  </code></pre>
  
  <h1>Example 2 - media queries within css selectors</h1>
  
  <pre><code>.foo {
    @media (min-width: 600px) { ... }
    @media (min-width: 1000px) { ... }
    @media (min-width: 1500px) { ... }
  }
  
  .bar {
    @media (min-width: 600px) { ... }
    @media (min-width: 1000px) { ... }
    @media (min-width: 1500px) { ... }
  }
  
  .hello {
    @media (min-width: 600px) { ... }
    @media (min-width: 1000px) { ... }
    @media (min-width: 1500px) { ... }
  }
  
  .world{
    @media (min-width: 600px) { ... }
    @media (min-width: 1000px) { ... }
    @media (min-width: 1500px) { ... }
  }
  </code></pre>
  
  <p>You may be wondering "why do this?". There are some limitations in LESS around extending classes across inside media queries, and also scoping variables.</p>