CSS @import and the order of it

Question

Is it possible to use @import in one css file like this.

@import file1
some css here
@import file2

chrome doesn't recognize the second import for the above but this will work

@import file1
@import file2
some css here

The problem here is I need "some css" to be in the middle because file2 will override some of them. Is there any other solution other than importing 3 files from html?

Answer 1

That is not possible:

From http://www.w3.org/TR/CSS21/cascade.html#at-import:

The '@import' rule allows users to import style rules from other style sheets. In CSS 2.1, any @import rules must precede all other rules (except the @charset rule, if present).

From http://www.w3.org/TR/CSS21/syndata.html#at-rules:

Assume, for example, that a CSS 2.1 parser encounters this style sheet:

@import "subs.css";
h1 { color: blue }
@import "list.css";

The second '@import' is illegal according to CSS 2.1. The CSS 2.1 parser ignores the whole at-rule, effectively reducing the style sheet to:

@import "subs.css";
h1 { color: blue }

---

There is no need to define the rules between the @imports though. If you want to override properties in file 1, they can also be added after the @import blocks. Properties which are overridden in file 2 can be omitted.

Answer 2

As others said, this is invalid CSS, but I want to add my 2 cents. If you are looking for a way to overcome this problem and also write better CSS (ie CSS that is more concise, easier to read and to maintain), you can use SASS. It's a program that enhances the CSS syntax and generates valid CSS files ready to be served to browsers. It's installed as a Ruby gem, then you can launch it this way

sass --watch  style.scss:style.css

Every time style.scss is modified, a new style.css is compiled. scss is the standard file extensions for SASS source files. In SASS this code is valid

@import "import1.scss";

a {
  color: red;
}

@import "import2.scss";

and compiles to the following style.css

a {
  /* This is the content of import1.scss */
  color: white;
}
a {
  color: red;
}
a {
  /* This is the content of import2.scss */
  color: white;
}

Note that I imported files ending in scss. This is advertised by the SASS reference not to fall back to regular CSS imports.

Answer 3

This is odd, but CSSWG intentionally disallows @import after property rules.

They say:

Flexibility includes the Working Group's ability to assign some meaning to @import after a certain point in a style sheet in the future without the new behavior being in conflict with existing practise in certain ways. You could read the current requirements as saying that using the @import rule at certain points as something the Working Group reserves for later use when it finds a usage that is more valuable to authors than being able to use it with the usual meaning right now. Assinging a specific meaning to it now would probably remove that option, so this may be a loss in the long term.

Also they say that @import itself descreases downloading speed (that's weak argument though, since it then does not matter where @import is placed — before property rules or after them, but former is allowed).

So we are forced to use a workaround like using one "TOC" stylesheet that only contains @imports in desired order (but that increments number of files that browser needs to download).

Answer 4

Use !important to prevent overriding

Something like this

<style>
.el{color:red !important;}
.el{color:blue;}
</style>

The color will stay red