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.