html - @media queries before or after class? -

i wanted know best practice media queries.

if target screen size like:

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;   } } 

would following better:

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;   } } 

instead of nesting @media queries inside classes, create standalone @media query , add class need changed?

nb: sorry all, i'm using preprocessor (sass). i'm thinking of ways organize code legibility.

media queries can't nested in pure css. css preprocessors (like less , stylus) allow that. css preprocessor take code you've given in example 1 (which invalid css, valid in css preprocessor) , convert similar example 2 (valid css).

if you're using css preprocessor example 1 best approach if have long chain of nested elements, if you're not using css preprocessor example 2 1 give results.