Guías HTML para importar
Aprende a identificar y corregir errores comunes de validación HTML marcados por el W3C Validator, para que tus páginas cumplan con los estándares y se muestren correctamente en todos los navegadores. También consulta nuestras Guías de accesibilidad.
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 <style> element or CSS file is:
- @charset (if needed, and only in external CSS files)
- @import rules
- All other CSS rules (@font-face, @media, style rules, etc.)
Examples
Incorrect: @import after a style rule
<style>
body {
margin: 0;
}
@import url("typography.css");
h1 {
color: navy;
}
</style>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
<style>
@font-face {
font-family: "MyFont";
src: url("myfont.woff2") format("woff2");
}
@import url("reset.css");
</style>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
<style>
@import url("reset.css");
@import url("typography.css");
@font-face {
font-family: "MyFont";
src: url("myfont.woff2") format("woff2");
}
body {
margin: 0;
}
h1 {
color: navy;
}
</style>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:
@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 <link> elements in your HTML <head> — 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.
¿Listo para validar tus sitios?
Comienza tu prueba gratuita hoy.