title: Is it better to have multiple media queries or a single media query
body: <p>I'm working with bootstrap and I want to (where applicable) have specific CSS for each screen size. I'm wondering if it's better to have 1 media query for each screen size in it's own section of my CSS sheet, or if I should do a media query in each spot where needed. </p>
  
  <p>So let's say I have this for my standard screen size:</p>
  
  <pre><code>.example-class{
      padding: 10px;
  }
  </code></pre>
  
  <p>And then for mobile screens, I want this:</p>
  
  <pre><code>@media(max-width: 480px){
      .example-class{
          padding: 5px;
      }
  }
  </code></pre>
  
  <p>Should I have 1 media query for mobile screens in it's own section of my CSS where all mobile screen styling will go, or should I do a media query each time I need to have custom styling for mobile screens. </p>
  
  <p>From what I can tell, having multiple media queries shouldn't necessarily impact performance. Adding many will increase the size of the CSS file though, which can impact performance.</p>
  
  <p>Additionally, I want to make sure that my CSS is easily understandable to others. I think it might be easier to have a media query in each instance it's needed, that way the CSS for a particular element is all in one spot. </p>