<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
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 usuario 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.
Comentarios