title: @media queries before or after class?
body: <p>I wanted to know which would be best practice for media queries.</p>
  
  <p>If you were to target a screen size I would generally do something like:</p>
  
  <pre><code>section#about {
    background-color: yellow;
    color: black;
    padding: 5px 20px;
  
    @media (max-width: 600px) {
      padding: 0;
    }
  }
  
  .button-small {
    margin-bottom: 12px;
  
    @media (max-width: 600px) {
      margin-bottom: 6px;
    }
  }
  </code></pre>
  
  <p>Would the following be better:</p>
  
  <pre><code>section#about {
    background-color: yellow;
    color: black;
    padding: 5px 20px;
  }
  
  @media (max-width: 600px) {
    section#about {
      padding: 0;
    }
  }
  
  .button-small {
    margin-bottom: 12px;
  }
  
  @media (max-width: 600px) {
    .button-small {
      margin-bottom: 6px;
    }
  }
  </code></pre>
  
  <p>Instead of nesting @media queries inside classes, you would create a standalone @media query and add the class you would need changed?</p>
  
  <p>NB: Sorry all, I'm using a preprocessor (SASS). I'm thinking of ways to organize code legibility. </p>