Recomendación CSS @import

[papanoelmola]

Tras leer algunos post sobre el uso de estilos y la organización de los mismos me gustaría dejar un apunte como metodología de una forma de integrar los mismo para hacer todo ello mucho más claro y editable.

La cuestión se trata de no utilizar un sólo fichero .css para añadir en el todos los estilos y parametros si no, segmentar su aplicación basado en elementos de la web.

Es decir

Crear un fichero (styles.css) desde el que podremos importar otros ficheros situados en el mismo directorio y donde cada uno de ellos alberga información sobre los parametros de elementos de la web por separado.

( styles.css )

Código:

@import url(_body.css);
@import url(_structure.css);
@import url(_header.css);
@import url(_header_menu.css);
@import url(_footer.css);

De esta forma por ejemplo si deseamos modificar algun parámetro relativo a la web general editariamos el archivo "_body.css" o "_structure.css" en caso de modificar alguna propiedad relativa a la estructura de nuestro sitio web.

Es un método útil ya que si generamos un diseño con una gran variedad de estilos y propiedades podremos acceder de forma más clara y directa al estilo sabiendo donde está situado y a que elementos de la web afecta.

Espero que esta información sea util. Saludos

[miketrix_esp]

Hola,

Quisiera recuperar este post porque tengo la siguiente duda:

Con tal de optimizar la carga de mi web, inicialmente definí tantos ficheros CSS como elementos tenía, porque así los tenía mejor ordenados y resulta mucho más fácil así. Pero a nivel de carga de web es malo, porque son muchas peticiones de ficheros y hace que la carga vaya más lento.

He pensado en usar el import, tal como explica papanoelmola. Mi pregunta es si es más rápido así o es lo mismo importar desde un único fichero CSS que cargar todos los CSS por separado?

[PatomaS]

Hola

En líneas generales, la respuesta es depende.

Depende de cuantas visitas tengas, de la forma en la que el servidor sirve los archivos y si son o no cacheables en los proxies, del tamaño de cada uno de ellos, etc, etc.

Como regla general, es mejor tener un solo archivo css que contenga todos los códigos necesarios ya que eso evita las múltiples conexiones al servidor (tiempo perdido del navegador y ancho de banda), trabajo de envío del servidor (búsqueda, revisión de estado y envío) y espera del usuario (navegador solicitando, analizando y ejecutando las instrucciones css).

Aunque la mecánica es cómoda para trabajar, no es buena para un sitio en producción.

Una cosa que puedes hacer para facilitarte el trabajo, es utilizar comentarios para demarcar zonas en la hoja de estilo y así hacerla más sencilla. Cuando llegue el momento de lanzar el sitio, eliminas los comentarios y publicas la css limpia. Por supuesto, siempre puedes mantener una copia en tu máquina con todos los comentarios para facilitar posteriores mejoras o actualizaciones al sitio, pero al volverlo a lanzar, vuelves a eliminar los comentarios.

Felicidad

[argy]

sugiero que también se lea http://www.anieto2k.com/2009/04/09/no-uses-import/

[Tedel]

No recomiendo usar import, haz solo un archivo CSS para todo lo que desees cambiar.

[ArturoGallegos]

creo que debemos considerar mas a fondo cuales son nuestros objetivos y necesidades para determinar si usar o no la etiqueta import

no podemos decir NO lo uses o SI úsalo si no conocemos las necesidades y alcance del proyecto sobre el que se este trabajando...

como por ejemplo al utilizar skins personalmente trabajo con dotnetnuke un paquete de skin puede tener tantas variantes como se necesiten y aplicarlas a las paginas a diestra y siniestra, con lo que muchas veces me ha resultado mucho mas fácil utilizar la propiedad @import para vincular archivos CSS en común que tengan estas variables.

ciertamente es de valorar que es lo que estas cargando en dicho CSS y que impacto tendrá sobre la web pero en la mayoría de los casos actualmente no es muy notorio o visible ese impacto... con las velocidades de Internet que tenemos hoy día

por otro lado ¬¬ no se han dado cuenta que este post tenia mas de 2 años sin actividad, recuerden que preferentemente debemos abrir un nuevo tema en lugar de revivir algo tan viejo

[opzina]

Hay varias formas de incluir Hojas de estilo.

Una de ellas es IMPORT.

En mi caso, no la usé nunca, y a demás, no lo veo necesario.

Igualmente, si ese "import" que quieres hacer es "liviano" o "light" puedes hacerlo sin inconvenientes. Ahora si el archivo a importar es robusto, creo que deberías buscar una alternativa.

Saludos.