¿Cómo importar una hoja de estilos CSS en otra hoja de estilos CSS?
Importar CSS en un CSS
Importar archivos CSS permite añadir estilos externos a una hoja de estilo CSS en particular.
Si tienes una página web en la que hay elementos que se repiten en todas o en la mayoría de páginas, por ejemplo el header, puedes tener una hoja de estilos CSS solo para el header e incluirla en las hojas CSS de cada parte de la web. De esta forma, cuando necesites cambiar algo en el header, solo tienes que cambiarlo una vez y se reflejará en todas las hojas.
Esta técnica se realiza mediante el uso de la directiva @import, que se coloca al comienzo de la hoja de estilo.
¿Cuáles son las ventajas de importar hojas CSS en otra hoja de CSS?
Importar hojas de estilo CSS en otra hoja de CSS es importante por varias razones.
En primer lugar, permite organizar mejor el código CSS al separar diferentes estilos en archivos separados. De esta manera, el código es más fácil de leer y mantener. Cuando necesites buscar o cambiar un estilo será más fácil encontrar el archivo donde está ese estilo y solo hará falta cambiarlo ahí para que los cambios se reflejen en todo el sitio web.
Además, la importación de archivos CSS puede mejorar la velocidad de carga de la página al permitir que los estilos se carguen de forma asíncrona, lo que significa que el navegador puede cargar el resto del contenido de la página mientras espera la carga de los estilos. Hay que decir que abusar de la importación de archivos CSS puede tener el efecto contrario y ralentizar la carga, obviamente no es lo mismo importar 5 archivos cortos o medianos que 500 archivos de mil líneas cada uno.
¿Cómo importar una hoja CSS en otra hoja CSS?
Importar una hoja CSS en otra hoja CSS se hace con @import url('nombre_hoja.css'); y siempre debe ponerse al principio de la hoja, antes de cualquier otra cosa. Si hay que importar varias hojas, hay que repetir el @import con cada una de las hojas y todas al principio de la hoja, antes de todo lo demás.
Para usar @import, primero debes crear un archivo CSS externo que contenga los estilos que deseas importar. Por ejemplo, vamos a importar una hoja de estilo para el header, otra para las listas y otra para el footer:
header.css /* esta es la hoja de estilos del header */
header{
width: 100%;
background-color: tomato;
font-size: 30px;
}
header img{
width: 200px;
height: 100px;
display: block;
margin: 0 auto;
}
listas.css /* esta es la hoja de estilos de las listas */
ul, ol{
padding: 0;
margin-left: 30px;
list-style: none;
text-align: justify;
}
ul li, ol li{
padding: 15px 0px;
font-size: 25px;
}
footer.css /* esta es la hoja de estilos de footer */
footer{
width: 100%;
padding: 30px 20px;
background-color: ligthgreen;
}
footer div{
width: 33%;
padding: 2%;
box-sizing: border-box;
display: block-inline;
}
Esas son las tres hojas de estilo CSS que queremos importar en la hoja CSS principal que tendrá el nombre de ejemplo "principal.css". Para importarlas hay que escribir al principio del todo (puedes usar rutas relativas o absolutas para especificar la ubicación del archivo):
@import url('header.css');
@import url('listas.css');
@import url('footer.css');
/* y a partir de aquí empiezan los estilos de la hoja principal */
*{
margin: 0;
}
body{
background-color: lightgray;
font-size: 23px;
}
/* y la hoja de estilo continua */
En este ejemplo, tres archivos CSS diferentes se importan en una sola hoja de estilo.
¿Cómo usar correctamente @import en CSS?
Una cosa importante a tener en cuenta al usar @import es que puede afectar el rendimiento de la página si se usa de manera incorrecta.
En particular, el uso excesivo de @import puede hacer que la página se cargue más lentamente. Para evitar este problema, es importante usar @import solo para importar archivos CSS esenciales y optimizar los archivos CSS para minimizar su tamaño.
Por ejemplo, una buena práctica es crear un archivo CSS principal que contenga solo los estilos esenciales y luego importar otros archivos CSS solo cuando sea necesario. De esta manera, se puede controlar la cantidad de archivos CSS que se importan en la página y garantizar que la página se cargue de manera eficiente.
En resumen, la importación de archivos CSS con @import es una técnica útil para organizar el código CSS y aumentar la eficiencia al escribir o cambiar estilos, además de mejorar la velocidad de carga de la página. Es importante usar esta técnica de manera responsable para garantizar un rendimiento óptimo de la página.