Hojas de estilo modulares con la regla import

CSS

La regla import permite importar otra hoja de estilo en la hoja actual. Debe aparecer al principio antes de cualquier regla y su valor es la URL. Se puede escribir de 2 formas

  • @import «estilo.css»;
  • @import url(«estilo.css»);

Tanto una forma como otra es válida y funcionan perfectamente. La ventaja principal de usar la regla @import que permite desarrollar las hojas de estilo de una forma modular. Puedes crear CSS separados por diferentes aspectos de tu sitio.

Voy a mostrar un ejemplo, importando el css importado.css con el siguiente código

CSS
1
2
3
4
5
6
7
p.importado
{
background-color:#00F;
color: #FFFFFF;
font-style:italic;
font: Arial, Helvetica, sans-serif;
}

Creo otra hoja de estilo llamado estilo.css que será el que haga la llamada a importado.css

CSS
1
2
3
4
5
6
7
8
9
10
11
@import url("importado.css");
 
p
{
   font-weight:bold;
}
 
h1
{
   font-style:italic;
}

Y la página donde se hará la prueba contendrá el siguiente HTML

XHTML
1
2
3
4
5
<h1>Este es un ejemplo del uso import</h1>
 
<p>Este parrafo no tiene reglas en la hoja de estilo importado</p>
 
<p class="importado">Este sí</p>

regla import css

Resultado del código

No es obligatorio usar la regla import en un CSS, también puede usarse dentro de de la etiqueta <style>

Puedes considerar también el desarrollo modular de las hojas de estilo según la apariencia de formularios, diferentes plantillas… Si una hoja de estilo tiene una regla para un elemento, dicha regla tendrá prioridad sobre otra regla conflictiva (sobre el mismo elemento) que se aplique de los CSS importados.

Cuando usar la regla import

Aunque parezca un concepto muy bonito, tiene sus aspectos negativos. El uso de esta regla perjudica al rendimiento de la página porque bloquea las descargas paralelas. Lo ideal, es que tengas varios recursos que se pueden descargar al mismo tiempo.

Por tanto, es recomendable usar @import en pocas ocasiones, por ejemplo, para alguna variación de un aspecto de tu web y no tener un solo CSS con muchos @import. Si quieres usar varios CSS es recomendable el elemento <link> ya que permite la descarga en paralelo mientras @import descargar de forma secuencial.

Y aquí finaliza el tutorial de hoy, espero que os haya gustado. A seguir picando 🙂