Importaciones: regla @import

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 deben indicar en las primeras líneas del fichero, ya que deben figurar antes de otras reglas CSS.

Suelen utilizarse para dividir en varios ficheros el código CSS y tenerlo mejor organizado, o para incluir otros ficheros .css externos, como por ejemplo, de tipografías de Google Fonts o similares.

Sintaxis de @import

En principio, existen dos sintaxis para cargar ficheros externos mediante la regla @import:

• 1️⃣ Utilizando la función url()
• 2️⃣ Indicando simplemente un entre comillas

En cualquiera de las dos sintaxis 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 */

El soporte de la regla @import es muy bueno, ya que es una regla tradicional en CSS que lleva bastante tiempo soportada en navegadores. Sin embargo, tiene ciertas características modernas que iremos viendo a lo largo de este artículo.

Importación en cliente

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

Tradicionalmente, las importaciones mediante @import suponían un problema importante de rendimiento, ya que 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 un detalle tan crítico como antiguamente.

Por otro lado, herramientas como Sass, PostCSS o LightningCSS (que se usan en el entorno de desarrollo) tienen mecanismos para realizar importaciones de forma anticipada, antes de generar el .css final que leerá el navegador. De esta forma se generará un sólo fichero con todo el código CSS junto, de modo que el navegador no tenga que realizar peticiones para descargarlos.

Modalidades de @import

Además de su objetivo principal, importar un fichero externo .css, existen algunas modalidades con añadidos interesantes en la regla @import. Dichas modalidades son las siguientes:

Veamos estas modalidades adicionales una por una.

Importaciones con media queries

Tenemos la posibilidad de importar hojas de estilo .css externas a la vez que indicamos posteriormente a la , una media query. Esto nos permitirá que esa hoja de estilos externa se descargue y procese, sólo si estamos en un navegador de un dispositivo que cumple las condiciones de la media query.

Observa algunos ejemplos de un @import con media queries:

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

• 1️⃣ 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.

• 2️⃣ En el segundo caso, hacemos lo mismo con el archivo desktop.css, pero sólo si el dispositivo tiene como mínimo 1280px de ancho, presumiblemente un dispositivo de escritorio.

• 3️⃣ En el tercer 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 que puede ser bastante interesante para reducir la cantidad de estilos CSS que se descargarán y procesarán en el navegador, si se trata de archivos .css muy grandes.

Importaciones 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.

► Aprender más sobre la regla @supports

Importaciones en capas

Una característica moderna que han implementado los navegadores, es la posibilidad de utilizar capas en CSS. Se trata de un sistema similar a las capas de un programa de diseño gráfico (como Photoshop), pero orientado a código CSS de cara a la Especificidad CSS.

@import url("colaviento.css") layer(framework);

/* Mi código CSS (está en otra capa, separada de framework) */

La idea es que puedes importar un archivo .css y meter su contenido en una capa virtual de CSS, donde se revisará la especificidad antes de pasar a otra capa. De esta forma puedes mantener aislados los estilos de un framework con los tuyos propios y no necesitar utilizar !important o reescribir los selectores para forzarlos.

► Aprender más sobre la regla @layer

Modalidades de import (Javascript)

Además de utilizar la regla @import de CSS, también es posible importar estilos CSS desde Javascript. Esto se hace mediante el uso de la función import del lenguaje, que tradicionalmente se utilizaba sólo para importar ficheros .js. Sin embargo, eso está cambiando en el presente y cambiará en el futuro.

Veamos que formas existen para importar CSS desde Javascript.

Importaciones de módulos CSS

Aunque aún es muy pronto para utilizarlas, Javascript utiliza un sistema muy similar para importar módulos ESM con contenido Javascript. Sin embargo, ese estándar se está ampliando para poder importar módulos JSON, CSS o HTML.

La sintaxis sería algo similar a lo siguiente:

// Importamos los estilos en un objeto CSSStyleSheet
import styles from "./index.css" with { type: "css" };

// Añade los estilos importados al documento
document.adoptedStyleSheets.push(styles);

Esto nos permitirá en el futuro, trabajar con CSS desde Javascript a nivel nativo, e incluso que sea mucho más sencillo añadir o modificar estilos parciales en nuestra web.

► Aprender más sobre Módulos HTML/CSS/JSON

Importaciones con automatizadores

Es posible que en algunos frameworks de Javascript te hayas encontrado con fragmentos de código similar al siguiente, donde se hace una importación directa de un fichero .css (o incluso de otros formatos como .scss o similares) desde Javascript:

import "./index.css";

Este fragmento de código realmente no es compatible directamente con el navegador y se trata de un mecanismo no oficial. Ciertos frameworks tienen herramientas de procesado de código, que obtienen el código CSS de ese fichero y lo gestionan fuera del navegador con herramientas como Webpack, Rollup, Vite o similares. Se llama proceso de transpilación.

► Aprender más sobre Automatizadores