@Import Styles Not Working in a Media Query

CSS @import causes media queries class not work

I figured out why it was doing it my media queries were before my class in the style sheet...

/* This doesn't work */

@media all and (max-width: 380px) {
    .class1 {
        width: 88%;
    }
}

.class1 {
    width: 300px;
}

/* This works */

.class1 {
    width: 300px;
}

@media all and (max-width: 380px) {
    .class1 {
        width: 88%;
    }
}

CSS @import does not work for @media stylesheets

In addition to Quentin's well written answer

A simple work-around would be to request your media query file first, and at the top of that, add the @import of your main style sheet

Use this one only in the <head>

<link href="css/rwd.css" rel="stylesheet">

And like this in its file

@import url('main.css');

@media (max-width:700px) {
  h1 {
    font-size: 16px;
  }
  /* and so on  */
}

PostCSS import not importing files inside @media query

Have you checked the documentation?

Looks like you should use

@import "detailed/small/base.css" (--small-device);

But please consider component-based css structures.
In most cases, including media queries in separate files makes support extremely complicated for other developers.

My best advise would be to have short mixins and sass syntax (with SugarSS)

=r($width)
  @media only screen and (max-width: $width+ "px")
    @content

=rmin($width)
  @media only screen and (min-width: $width+ "px")
    @content

So, you can use

+r(--mobile)
  some: property

SCSS/postcss native is good too

How to import the css file by media queries by condition

The correct format is

@import url(../styles/sedms.css) (max-width:768px);

See here: http://philarcher.org/diary/2011/importrules/

Will `not` media query save resources when importing css?

Whether or not it will save resources is browser dependent.

From what I have observed, the media query is evaluated at runtime after actually importing the file. You can easily check in the network tabs of the debugging tools if the file is being downloaded or not. This has the most impacts client-side.

opinionated:
For the content of the files, you should make your default.css agnostic of the colouring scheme (more about common stuff) and have a light.css with only changes that apply, and then have another dark.css for the "non-light" theme.

The less you override rules, the better (for your own sake).
Although, unless you have millions of rules, the impact of overriding a rule or adding more rules is close to negligible and is/should be optimized by the browser.