Why not use @ import in CSS and @ import in CSS?

Why not use @ import in CSS and @ import in CSS?

Http://www.stevesouders.com/blog/2009/04/09/dont-use-import/
Why not use @ import in CSS?

@ Import usage in CSS

There are two methods to introduce CSS: @ import and link.
@ Import url ('address ');
<Link href = "Address" rel = "stylesheet" type = "text/css"/>
Currently, most websites use the last link method because
@ Import: loads HTML first, and then CSS.
Link first loads CSS and then HTML.

Therefore, when loading a webpage, the former will display a format other than the viewer, and the latter will load the webpage in a format.

Why should @ import be placed at the top of the style sheet in css?

In fact, @ import is not always at the beginning

@ Import is defined in the W3C CSS2.1 standard as follows:
In CSS 2.1, any @ import rules must precede all other rules (should t the @ charset rule, if present ).
In CSS2.1, any @ import command must be placed before all other statements (except when @ charset is used ).

In the CSS3 standard, the rule is as follows:
Any '@ import 'rules' must follow all' @ charset 'rules' and precede all other at-rules and rule sets in a style sheet.
In the style sheet, any @ import command must be followed by the @ charset command (if any) and placed before other @ commands and style statements.

Also, the @ import command will take effect after being annotated. You don't need to know why, just remember that if you don't do this @ import, it will expire. If you have to investigate why such a rigid rule is required, I think it is mainly for the following reasons:

<P id = "intro" class = "frame head"> I'm just a <p> element used test specificity of selectors. So leave me alone! </P>

P # intro {font: italic 1em Candara, Arial, sans-serif ;}
P. frame {font: bold 3em Arial, Helvetica, sans-serif ;}
P {font: italic 2em Georgia, serif ;}

Which rule font style do you think the page will eventually use? Is the first p # intro. This involves a specificity problem: # id>. class> element (Tag name ). Therefore, even if the p {font} style appears after p # intro {font} and p. frame {}, the final application is p # intro {font }. The following situations are likely to cause problems:

P. head {font: italic 1em Candara, Arial, sans-serif ;}
P. frame {font: bold 3em Arial, Helvetica, sans-serif ;}

Which font style do you think will be used this time? Is the second p. frame. The problem of cascading is involved here. The priority of p. head is the same as that of p. frame, but after p. frame is written in p. head, the font style of p. frame will overwrite the font style of p. head.

In this case, you can place @ import in a bunch of styles. Whether the style table introduced by @ import overwrites the entries in the current style table is more difficult to judge. In fact, even if the CSS standard does not provide such a rule, programmers will still do so, because this can reduce a lot of unnecessary troubles.
Reference: www.w3.org/...import..remainder full text>