title: How can I avoid media query overlap?
body: <p>The cascade is what makes CSS special and powerful. But in the case of media queries, overlap <em>can</em> seem problematic.</p>
  
  <p>Consider the following CSS (continuing <a href="https://stackoverflow.com/questions/13241531/what-are-the-rules-for-css-media-query-overlap-rwd">rules for CSS media query overlap</a>):</p>
  
  <pre class="lang-css prettyprint-override"><code>/* Standard - for all screens below 20em */
  
  body { color: black; font-size: 1em; }
  
  /* Query A - slightly wider, mobile viewport */
  
  @media (min-width: 20em) and (max-width: 45em) {
      body { color: red; } /* supposed to be unique for this width */
  }
  
  /* Query B - everything else */
  
  @media (min-width: 45em) {
      body { font-size: larger; } /* because viewport is bigger */
  }
  </code></pre>
  
  <p>So when the screen is exactly 45em wide, the overlap at 45em <a href="https://stackoverflow.com/a/13611538/1779823">will be treated</a> according to the standard CSS cascade:</p>
  
  <ul>
  <li>All <code>max-width: 45em</code> definitions will be applied first,</li>
  <li>and all <code>min-width: 45em</code> will be applied thereafter.</li>
  </ul>
  
  <p>Consider these two conditions:</p>
  
  <ul>
  <li>All text would normally be <code>black</code>, but <em>Query A</em> is unique and has <code>color: red</code>. </li>
  <li>Since <em>Query B</em> is for larger viewports, it's text has the CSS <code>font-size: larger</code>.</li>
  </ul>
  
  <p>Therefore, at a width of exactly 45em, we'd get <strong>big and red text</strong>. <em>What would be the best solution to avoid this?</em> </p>
  
  <hr>
  
  <p>I see two possibilities:</p>
  
  <ol>
  <li><p>Re-declare the text to have <code>color: black</code> in <em>Query B</em>, but then you're managing two declarations if you choose to change the <code>color</code> in the future. (Of course, not such a problem with this single line of code, but imagine there's a lot of other declarations and selectors.)</p></li>
  <li><p>Avoid overlap by using pixel values like <code>max-width: 799px</code> and <code>min-width: 800px</code>, but then you're using pixels — I guess they could be 49.9375em and 50em, respectively. Though what if the default is no longer 16em and something gets rounded? And we're <a href="https://stackoverflow.com/a/13611538/1779823">still not certain</a> what happens at that gap. (A black hole that breaks the space-time continuum?)</p></li>
  </ol>
  
  <p>Both have their drawbacks... any other ideas?</p>