Como utilizar la regla @import 6e4a13

La regla @import permite cargar uno o varios archivos CSS dentro de otro. Puede ser muy útil en determinados casos. Por ejemplo, cuándo trabajas en una web grande y compleja, el archivo CSS se vuelve descomunal e intratable y para hacernos la vida más fácil podemos separar el código en varios archivos, cada uno dedicado a una parte específica, y cargarlos con la regla @import. En tu HTML puedes cargar un sólo archivo:

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

Y en el archivo style.css cargar todos los demás que necesites y en el orden que necesites:

@import url('/css/reset.css');
@import url('/css/layout.css');
@import url('/css/typograhpy.css');
@import url('/css/content.css');
@import url('/css/sidebar.css');
@import url('/css/color.css');

La ventaja es obvia, puedes dividir el CSS en diferentes partes siguiendo la lógica que prefieras para tener el trabajo más organizado, más fácil de manejar y más fácil de aislar errores.

Además, la regla @import permite utilizar toda la potencia de los media-query y cargar diferentes archivos en función del dispositivo o sus características:

@import url('/css/reset.css') all;
@import url('/css/layout.css') all;
@import url('/css/typograhpy.css') screen;
@import url('/css/content.css') screen;
@import url('/css/sidebar.css') screen;
@import url('/css/color.css') screen;
@import url('/css/print.css') print;
@import url('landscape.css') screen and (orientation:landscape);

El gran inconveniente 2o3t3j

Como otras muchas cosas cool de CSS, hay que utilizarlas con precaución y sabiendo muy bien lo que se hace. La regla @import tiene algunas particularidades que te pueden llevar de cabeza pero sin duda su principal inconveniente es que cada archivo cargado con @import supone una nueva solicitud al servidor, lo que puede afectar a la velocidad de carga de la web. La tendencia general es disminuir al máximo el número de solicitudes por página, y por tanto la recomendación general es no utilizar la regla @import.

Este problema es fácil de arreglar. Puedes seguir utilizando @import tanto como desees y utilizar algún método para combinar todos los archivos en el servidor y mandar al navegador del un código CSS sin reglas @import. Estos métodos pueden ser algo complicados pero existen soluciones open source listas para utilizar. Por ejemplo, la biblioteca minify para PHP o los plugins W3 Total Cache o WP Super Cache para WordPress.

Sólo ten en cuenta que si utilizas @import con el atributo media no te valdrá ninguna de las soluciones mencionadas; es lógico, piensa que las condiciones del atributo media se leen en el lado del cliente y no desde el servidor. Por ejemplo, no podemos diferenciar en el servidor si el documento se está imprimiendo o se está viendo en pantalla (media="print" o media="screen"), por lo que no podemos cargar diferentes archivos CSS en función de esta propiedad.