# CSS: @import are not allowed after any valid statement other than @charset and @import. > Canonical HTML version: https://rocketvalidator.com/html-validation/css-import-are-not-allowed-after-any-valid-statement-other-than-charset-and-import > Attribution: Rocket Validator (https://rocketvalidator.com) > License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/) The `@import` rule allows you to pull in styles from another CSS file. According to the CSS specification, `@import` rules must precede all other at-rules (except `@charset`) and all style rules. When a browser encounters an `@import` after another valid CSS statement, it silently ignores the import. This means the styles you intended to load simply won't be applied, which can lead to broken layouts or missing designs that are difficult to debug. The W3C validator catches this ordering problem and flags it because the misplaced `@import` will have no effect. Even though browsers won't throw a visible error, the imported stylesheet is completely discarded, making this a real functional issue rather than just a cosmetic validation warning. The correct order inside a ` ``` The `@import` is placed after the `body` rule, so the browser will ignore it entirely. The styles from `typography.css` will never be loaded. ### Incorrect: `@import` after another at-rule ```html ``` Even though `@font-face` is an at-rule, it is not `@charset` or `@import`, so placing `@import` after it is invalid. ### Correct: `@import` rules first ```html ``` All `@import` rules appear before any other statements, so they are valid and the imported stylesheets will be loaded correctly. ### Correct: Multiple `@import` rules with `@charset` In an external CSS file, you may also have a `@charset` declaration. It must come first, followed by `@import` rules: ```css @charset "UTF-8"; @import url("base.css"); @import url("components.css"); body { font-family: sans-serif; } ``` ## Alternatives to `@import` While fixing the ordering resolves the validation error, it's worth noting that `@import` in CSS can cause performance issues because imported files are loaded sequentially rather than in parallel. Consider these alternatives: - **Multiple `` elements** in your HTML `` — these allow browsers to download stylesheets in parallel. - **CSS bundling tools** — build tools like Webpack, Vite, or PostCSS can combine multiple CSS files into one at build time, eliminating the need for `@import` at runtime. If you do use `@import`, just make sure every instance appears at the very top of your stylesheet, before any other CSS rules.