Home/ Questions/Q 6894367
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T06:46:25+00:00

I have an html web design made by someone else; they have used @import

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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
    • 0