Q:

should I put default declaration on the same stylesheet with the media queries stylesheet?

I put my default declaration in style.css and then I put all media queries in different sytlesheet called enhanced.css. 
For example, I put a code in style.css something like this:
.box{height: 600px;}
and then I put a css code in enhanced.css so the box's height will decrease when it is on a smaller screen.
@media only screen and (min-width: 320px) and (max-width: 480px) {
   .box{height:300px;}
}
But unfortunately it didn't work in small screen. It always follow styles from style.css. My question is, can I do something like above? To put default declaration on different sylesheet, or should I put default declaration on the same stylesheet with the media queries stylesheet ?  
Thanks.

A:

The problem is that your selectors are of equal specificity (@media rules don't have any specificity) - both rules are using one class selector (.box) and because you're loading .style.css after enhanced.css the former takes precedence. You need to increase the specificity of your @media rule if you want to include it before your regular .box rule - e.g.
@media only screen and (min-width: 320px) and (max-width: 480px) {
    body .box {
        height: 300px;
    }

