What is the correct link sequence when replacing @import from within a css file

I have an html web design made by someone else; they have used @import inside the css files. I will for several reasons (primarily: http://www.stevesouders.com/blog/2009/04/09/dont-use-import/) to remove the @import inside the css files and instead include directly it in the html page with: <link rel="stylesheet"… >

My question is now: what will be the correct way to include the files via link to maintain the current rule validation sequence

Current @import sequence, eg.:

a.css
  @import b.css

b.css
  @import c.css
  @import d.css

Will the correct link order be:

a.css
b.css
c.css
d.css

or is it something like:

c.css
d.css
b.css
a.css

or???

Each file contains, besides one or more import tags also own css rules.

For the record: it is not an option for me to gather all the files in one file – the different css files are used I different context alone and/or together

Solution

An @import rule includes all stylerules as if they were on that position. Example (default.css):

@import "first.css";
@import "second.css";
@import "third.css";

body {
   color: #333333;
}

In this order, all css rules of first.css will be applied first, then the second.css, then the third.css. So if you want to remove the inclusion, just follow the import links and add them in this order in your html head section:

<head>
  <title>Whatever</title>
  <link href="first.css" rel="stylesheet" type="text/css">
  <link href="second.css" rel="stylesheet" type="text/css">
  <link href="third.css" rel="stylesheet" type="text/css">
  <link href="default.css" rel="stylesheet" type="text/css">
</head>

So, in your case it will be:

c.css
d.css
b.css
a.css