CSS tiene una instrucción llamada @import que, como su nombre indica, nos permite importar código CSS que tenemos en otros archivos. Es una sentencia útil para organizar el código CSS en varios archivos, que podemos usar con total libertad, ya que está soportada en todos los navegadores del mercado, incluso los más viejos.

Por qué importar código CSS con @import

CSS es un lenguaje relativamente sencillo de usar. Es fácil aplicar estilos a los elementos de la página y verlos reflejados en el aspecto de una web. Sin embargo, una de las dificultades que nos podemos encontrar es a la hora de organizar nuestro código CSS, de modo que sea fácilmente mantenible.

Uno de los problemas que tenemos que resolver para conseguir un mejor mantenimiento del código es el de manejar archivos realmente grandes, donde tengamos cientos o miles de líneas de estilos, con una pobre estructuración. La mejor solución para evitar este punto es mantener las declaraciones de estilos de la página en diversos archivos de código CSS.

Es ahí donde @import nos puede ayudar. Nosotros podemos tener el código CSS dividido por responsabilidades sencillas y cada una de esas partes colocarla en un fichero independiente. Por ejemplo, podríamos tener un archivo por cada componente de la aplicación web, como los botones, titulares, elementos de formularios, etc. Otro archivo con el layout principal de la página, los estilos de alguna sección en particular, etc. Luego, cada uno de esos archivos los puedes importar con su correspondiente @import en el código.

Sintaxis @import

Veamos ahora la manera de importar una declaración externa de estilos CSS. Es realmente fácil, solamente tendrá que colocar los imports al principio del código CSS.

@import url("archivo_a_importar.css");

Esta sentencia se utiliza para importar unas declaraciones de estilos guardadas en la ruta que se indica entre paréntesis. (las comillas son opcionales, pero los paréntesis son obligatorios).

Eso es todo! cuando el navegador encuentra esa instrucción @import, realizará una solicitud al servidor para traerse el código del "archivo_a_importar.css" y, por supuesto, procesarlo y aplicar los estilos en la página.

Otra manera de incluir archivos externos

Podemos usar la sentencia @import simplemente para conseguir abrir una declaración de estilos que se debe aplicar en la página. Para ello se debe incluir en la declaración de estilos global a una página, es decir entre las etiquetas <style type="text/css"> y </style>, que se colocan en la cabecera del documento, y dentro de ella la sentencia @import.

Es importante señalar que la sentencia de importación del archivo CSS se debe escribir en la primera línea de la declaración de estilos, algo parecido al código siguiente.

<style type="text/css"> 
@import url ("estilo.css"); 
body{ 
   background-color: #ffffcc; 
} 
</style>

El funcionamiento es el mismo que si escribiésemos todo el fichero a importar (en este caso estilo.css) dentro de las etiquetas de los estilos.

En en cuenta que, si redefinimos estilos después de la declaración @import, por la regla de la cascada, los que se aplicarán serán los que hayamos redefinido y se sobreescribirán aquellos estilos que habían quedado definidos en el archivo externo.

Así, en el ejemplo anterior, aunque hubiésemos definido en estilo.css un color de fondo para el elemento BODY, el color que prevalecería sería el definido a continuación de la importación: #ffffcc

Cuando usar @import y la etiqueta LINK

Generalmente para aplicar estilos en una página web desde un archivo externo usamos la etiqueta LINK que ya hemos conocido en este manual de CSS.

<link rel="stylesheet" type="text/css" href="hoja.css">

Podríamos usar @import como hemos visto para realizar un comportamiento similar, pero no es algo habitual.

La utilidad de usar @import url("estilo.css") podría ser traerse unas reglas básicas de CSS (que se definen en un archivo a importar) y luego redefinirlos con unos estilos específicos para cada página a continuación, dentro del código HTML, entre las etiquetas </style>, como es el caso del ejemplo visto anteriormente.

@import en realidad se usa más para poder organizar código CSS de un proyecto mediano o grande en archivos distintos, como comentamos al principio del artículo.

Las múltiples solicitudes con @import

Hay un tema importante a considerar con los @import y es que el navegador realizará una solicitud HTTP para cada uno de los archivos importados. Si tenemos muchos archivos sueltos con código CSS se realizarán muchas solicitudes HTTP, lo que puede impactar negativamente en el rendimiento de la página.

A fin de optimizar el sitio web cuando realizamos múltiples imports podemos usar herramientas como los preprocesadores, por ejemplo Sass, o bien PostCSS mediante el plugin postcss-import.

Quizás es un poco pronto para hablar de estas herramientas (ya que estamos aún comenzando del Manual de CSS), pero en las páginas enlazadas en el párrafo anterior podrás encontrar más información, que seguro te interesará cuando llegue el momento.