La regla @import es una regla de CSS que permite cargar un fichero .css externo, leer sus líneas de código e incorporarlo al archivo actual. Estas reglas CSS se suelen indicar en las primeras líneas del fichero, ya que deben figurar antes de otras reglas CSS o contenido CSS similar.

La sintaxis de la regla @import es la siguiente:

Un detalle muy importante es que hay que tener en cuenta que la regla @import se evalua en el navegador a la hora de cargar la página, por lo que cada regla @import equivale a una petición al servidor de un nuevo archivo .css.

Esto, tradicionalmente, suponía un problema, ya que a efectos de rendimiento podría ser mucho mejor incluir todo el código CSS en un solo archivo para reducir el número de peticiones. Sin embargo, actualmente, en páginas que funcionen bajo el protocolo HTTP/2 o superior, podría no ser tan relevante. Preprocesadores como Sass (o similares) tienen mecanismos para realizar imports anticipados y generar un sólo fichero con todo el código CSS para que el navegador realice menos peticiones.

Formato de @import

En principio, existen dos formas de cargar ficheros externos mediante la regla @import: utilizando la función url() o indicando simplemente un con el archivo o dirección URL:

Como se puede ver a continuación, se pueden utilizar tanto los nombres de los archivos, como rutas relativas o absolutas:

@import url("menu.css");                 /* Fichero en la misma ruta */
@import url("menu/sidebar.css");         /* Ruta relativa, dentro de menu/ */
@import "https://manz.dev/index.css";    /* Ruta absoluta, URL completa */

Importaciones condicionales

Dentro de las importaciones que se pueden hacer con la regla @import, existen dos tipos de importaciones condicionales. Por un lado, tenemos la posibilidad de indicar posteriormente a la , una media query que nos permitirá que esa hoja de estilos externa se descargue y procese sólo si estamos en un navegador que cumple las condiciones de la media query. Por otro lado, podemos combinar la regla @supports con la regla @import y establecer condiciones específicas.

Import con media queries

Observa como podemos indicar una media query, para que ese archivo .css se importe sólo en el caso de que se cumpla:

@import url("mobile.css") (width <= 640px);
@import url("print.css") print;

En el primer caso, el archivo mobile.css se descargará sólo si se está utilizando una pantalla que tenga como máximo 640px de ancho, presumiblemente un dispositivo móvil. En el segundo caso, el archivo print.css se aplicará sólo si estamos imprimiendo con el navegador la página actual, de lo contrario, no se descargará ni se aplicará.

Esto es un mecanismo bastante interesante para reducir la cantidad de estilos CSS que se descargarán y procesarán.

Import condicionales

Existe otra forma de importar condicionalmente código CSS, y es utilizando supports tras la de nuestra regla @import. Esto permite que descarguemos y procesemos dicho archivo .css sólo si se cumple la condición del supports, basada en la regla @supports:

@import url("flex-fallback.css") supports(not (display: grid));
@supports (display: grid) {
  /* ... */
}

En este caso, si estamos en un navegador antiguo que no soporta grid, descargará y procesará el fichero flex-fallback.css donde colocaremos los estilos alternativos (utilizando flex, por ejemplo). En el caso de que lo soporte, hará lo que tenemos en la regla @supports, que aunque se indica en este ejemplo, no tiene relación directa con el @import y no es obligatorio utilizarlo en conjunto.

Importaciones en capas

Una característica moderna que han implementado los navegadores, es la posibilidad de utilizar capas en CSS: un sistema similar a las capas de un programa de diseño gráfico, pero orientado a CSS, donde puedes fusionar los estilos y gestionar mejor la especificidad. Profundizamos y hablamos de esta característica en el artículo La regla @layer.