title: Why don't CSS media queries follow the normal conventions of inheritance and cascade?
body: <p>I've been having some issues with my CSS3 media queries...</p>
  
  <p>Here's a small snippet of one I'm currently working on:</p>
  
  <pre><code>@media only screen 
  and (max-width : 420px) {
      .page { min-width: 300px; max-width: 480px; width: 100%; }
      .page .alpha { font-size: 2em; }
  
      /* Set-up the column */
      .page .column { margin: 0 auto 2%; width: auto; }
      .page .gallery .column { min-height: 470px; height: auto; padding: 2%; }
  }
  
  /* Increase the main title for slightly larger screens! */
  @media only screen 
  and (max-width : 480px) {
      .page .alpha { font-size: 3em; }
  }
  </code></pre>
  
  <p>I'm working from a 'mobile first' standpoint and given the normal behaviour of CSS regarding the 'cascading' aspect I would expect the second <code>@media</code> statement to inherit all of the styles from the previous statement, whilst overriding any for which it has a matching or 'heavier' selector.</p>
  
  <p>(Plus CSS's order of precedence would mean any matching style definitions would use the last defined rule-set unless 'trumped' with an <code>!important</code> statement!)</p>
  
  <p>From what I've seen though, through testing and some Google / SE searches this is not the case.</p>
  
  <p>Is it possible for <code>@media</code> style rules to inherit from applicable earlier statements or am I stuck with having to repeat all the rules I need for each statement? (not very <a href="http://en.wikipedia.org/wiki/Don%27t_repeat_yourself" rel="nofollow">DRY</a>)</p>
  
  <p>I'd really appreciate any help and clarifications / explanations for this.</p>