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

i put default declaration in style.css , put media queries in different sytlesheet called enhanced.css.

for example, put code in style.css this:

.box{height: 600px;}

and put css code in enhanced.css box's height decrease when on smaller screen.

@media screen , (min-width: 320px) , (max-width: 480px) { .box{height:300px;} }

but unfortunately didn't work in small screen. follow styles style.css. question is, can above? put default declaration on different sylesheet, or should put default declaration on same stylesheet media queries stylesheet ?

thanks.

the problem selectors of equal specificity (@media rules don't have specificity) - both rules using 1 class selector (.box) , because you're loading .style.css after enhanced.css former takes precedence. need increase specificity of @media rule if want include before regular .box rule - e.g.

@media screen , (min-width: 320px) , (max-width: 480px) {     body .box {         height: 300px;     }