html - react - ¿La mejor manera de incluir CSS? ¿Por qué usar @import?
import style in css (17)
@Nebo Iznad Mišo Grgur
Las siguientes son todas las formas correctas de usar @import
@import url("fineprint.css") print;
@import url("bluish.css") projection, tv;
@import ''custom.css'';
@import url("chrome://communicator/skin/");
@import "common.css" screen, projection;
@import url(''landscape.css'') screen and (orientation:landscape);
fuente: https://developer.mozilla.org/en-US/docs/Web/CSS/@import
Básicamente, me pregunto cuál es la ventaja / propósito de usar @import para importar hojas de estilo en una hoja de estilo existente en lugar de simplemente agregar otra ...
<link rel="stylesheet" type="text/css" href="" />
¿A la cabecera del documento?
A veces tienes que usar @import en lugar de en línea. Si está trabajando en una aplicación compleja que tiene 32 o más archivos css y debe admitir IE9, no hay opción. IE9 ignora cualquier archivo css después del primer 31 y esto incluye un css en línea. Sin embargo, cada hoja puede importar 31 más.
Casi no hay razón para usar @import, ya que carga cada archivo CSS importado por separado y puede ralentizar significativamente su sitio. Si está interesado en la forma óptima de tratar con CSS (cuando se trata de la velocidad de la página), esta es la forma en que debe tratar con todo su código CSS:
- Abra todos sus archivos CSS y copie el código de cada archivo
- Pegue todo el código entre una sola etiqueta de ESTILO en el encabezado HTML de su página
- Nunca use CSS @import o archivos CSS separados para entregar CSS a menos que tenga una gran cantidad de código o exista una necesidad específica.
Más información detallada aquí: http://www.giftofspeed.com/optimize-css-delivery/
La razón por la que lo anterior funciona mejor es porque crea menos solicitudes para que el navegador las maneje y puede comenzar a renderizar el CSS inmediatamente en lugar de descargar archivos separados.
Citado en http://webdesign.about.com/od/beginningcss/f/css_import_link.htm
El propósito principal del método @import es usar múltiples hojas de estilo en una página, pero solo un enlace en su <head>. Por ejemplo, una corporación puede tener una hoja de estilo global para cada página del sitio, con subsecciones con estilos adicionales que solo se aplican a esa subsección. Al vincularse a la hoja de estilo de la subsección e importar los estilos globales en la parte superior de esa hoja de estilo, no tiene que mantener una hoja de estilo gigantesca con todos los estilos para el sitio y cada subsección. El único requisito es que cualquier regla de @import debe venir antes que el resto de las reglas de estilo. Y recuerda que la herencia todavía puede ser un problema.
Creo que @import es más útil al escribir código para múltiples dispositivos. Incluya una declaración condicional para incluir solo el estilo del dispositivo en cuestión, luego solo se carga una hoja. Aún puede usar la etiqueta de enlace para agregar cualquier elemento de estilo común.
Creo que la clave en esto son las dos razones por las que realmente estás escribiendo múltiples hojas de estilo CSS.
- Escribe varias hojas porque las diferentes páginas de su sitio web requieren diferentes definiciones de CSS. O al menos no todas requieren todas las definiciones de CSS que requieren otras páginas. Así que divide los archivos CSS para optimizar qué hojas se cargan en las diferentes páginas y evitar cargar demasiadas definiciones CSS.
- La segunda razón que me viene a la mente es que su CSS se está volviendo tan grande que su manejo se vuelve torpe y para facilitar el mantenimiento del gran archivo CSS que se divide en varios archivos CSS.
Por la primera razón, la etiqueta <link> adicional se aplicaría, ya que esto le permite cargar diferentes conjuntos de archivos CSS para diferentes páginas.
Por la segunda razón, la instrucción @import aparece como la más práctica porque obtienes múltiples archivos CSS pero los archivos cargados son siempre los mismos.
Desde la perspectiva del tiempo de carga no hay diferencia. El navegador tiene que revisar y descargar los archivos CSS separados sin importar cómo se implementen.
Desde el punto de vista de la velocidad de la página, @import de un archivo CSS casi nunca debería usarse, ya que puede evitar que las hojas de estilo se descarguen simultáneamente. Por ejemplo, si la hoja de estilo A contiene el texto:
@import url("stylesheetB.css");
entonces la descarga de la segunda hoja de estilo puede no comenzar hasta que la primera hoja de estilo haya sido descargada. Si, por otro lado, ambas hojas de estilo están referenciadas en elementos <link> en la página HTML principal, ambas pueden descargarse al mismo tiempo. Si ambas hojas de estilo siempre se cargan juntas, también puede ser útil simplemente combinarlas en un solo archivo.
Ocasionalmente, hay situaciones en las que @import es apropiado, pero generalmente son la excepción, no la regla.
Ellos son muy similares. Algunos pueden argumentar que @import es más fácil de mantener. Sin embargo, cada @import le costará una nueva solicitud HTTP de la misma manera que usando el método de "enlace". Así que en el contexto de la velocidad no es más rápido. Y como dijo "duskwuff", no se carga simultáneamente, lo que es una caída.
Es mejor NO usar @import para incluir CSS en una página por razones de velocidad. Vea este excelente artículo para saber por qué no: stevesouders.com/blog/2009/04/09/dont-use-import
Además, a menudo es más difícil minimizar y combinar los archivos css que se sirven a través de la etiqueta @import, ya que los scripts de minify no pueden "despegar" las líneas @import de otros archivos css. Cuando los incluya como <etiquetas de enlace, puede usar los módulos existentes de minify php / dotnet / java para hacer la minificación.
Entonces: use <link /> lugar de @import .
Esto podría ayudar a un desarrollador de PHP. Las siguientes funciones eliminarán los espacios en blanco, eliminarán comentarios y concatenarán todos sus archivos CSS. Luego insértelo en una etiqueta <style> en la cabecera antes de cargar la página.
La siguiente función eliminará los comentarios y minimizará los pasados en css. Se empareja junto con la siguiente función.
<?php
function minifyCSS($string)
{
// Minify CSS and strip comments
# Strips Comments
$string = preg_replace(''!//*.*?/*/!s'','''', $string);
$string = preg_replace(''//n/s*/n/'',"/n", $string);
# Minifies
$string = preg_replace(''/[/n/r /t]/'','' '', $string);
$string = preg_replace(''/ +/'','' '', $string);
$string = preg_replace(''/ ?([,:;{}]) ?/'',''$1'',$string);
# Remove semicolon
$string = preg_replace(''/;}/'',''}'',$string);
# Return Minified CSS
return $string;
}
?>
Llamarás a esta función en la cabecera de tu documento.
<?php
function concatenateCSS($cssFiles)
{
// Load all relevant css files
# concatenate all relevant css files
$css = '''';
foreach ($cssFiles as $cssFile)
{
$css = $css . file_get_contents("$cssFile.css");
}
# minify all css
$css = minifyCSS($css);
echo "<style>$css</style>";
}
?>
Incluya la función concatenateCSS() en el encabezado de su documento. Pase una matriz con los nombres de sus hojas de estilo con su ruta IE: css/styles.css . No es necesario que agregue la extensión .css ya que se agrega automáticamente en la función anterior.
<head>
<title></title>
<?php
$stylesheets = array(
"bootstrap/css/bootstrap.min",
"css/owl-carousel.min",
"css/style"
);
concatenateCSS( $stylesheets );
?>
</head>
Experimenté un "pico alto" de hojas de estilo vinculadas que puedes agregar. Mientras que agregar cualquier número de Javascript vinculado no fue un problema para mi proveedor de host gratuito, después de duplicar el número de hojas de estilo externas, tuve un bloqueo / desaceleración. Y el ejemplo de código correcto es:
@import ''stylesheetB.css'';
Por lo tanto, me parece útil para tener un buen mapa mental, como mencionó Nitram, a la vez que sigue trabajando en el diseño. Buena suerte. Y perdono los errores gramaticales ingleses, si los hay.
Hay muchas buenas razones para usar @import.
Una razón poderosa para usar @import es hacer diseño de navegador cruzado. Las hojas importadas, en general, están ocultas de muchos navegadores antiguos, lo que le permite aplicar un formato específico para navegadores muy antiguos como Netscape 4 o series anteriores, Internet Explorer 5.2 para Mac, Opera 6 y versiones anteriores, y IE 3 y 4 para PC.
Para hacer esto, en su archivo base.css podría tener lo siguiente:
@import ''newerbrowsers.css'';
body {
font-size:13px;
}
En su hoja personalizada importada (newerbrowsers.css) simplemente aplique el nuevo estilo en cascada:
html body {
font-size:1em;
}
El uso de unidades "em" es superior a las unidades "px", ya que permite que tanto las fuentes como el diseño se extiendan en función de la configuración del usuario, donde los navegadores antiguos funcionan mejor con base en píxeles (que son rígidos y no se pueden cambiar en la configuración de usuario del navegador) . La hoja importada no sería vista por la mayoría de los navegadores antiguos.
Puedes hacerlo, a quién le importa! Intente acceder a algunos sistemas gubernamentales o corporativos anticuados más grandes y seguirá viendo los navegadores antiguos utilizados. Pero es realmente un buen diseño, porque el navegador que amas hoy también será anticuado y anticuado también algún día. Y el uso de CSS de manera limitada significa que ahora tiene un grupo aún mayor y creciente de agentes de usuario que no funcionan bien con su sitio.
El uso de @importar la compatibilidad de su sitio web con varios navegadores ahora alcanzará el 99.9% de saturación simplemente porque muchos de los navegadores antiguos no leen las hojas importadas. Garantiza que aplique un conjunto de fuentes básico simple para su html, pero los agentes más nuevos usan CSS más avanzado. Esto permite que el contenido sea accesible para los agentes más antiguos sin comprometer las visualizaciones visuales necesarias en los navegadores de escritorio más nuevos.
Recuerde, los navegadores modernos almacenan estructuras HTML y CSS extremadamente bien después de la primera llamada a un sitio web. Varias llamadas al servidor no son el cuello de botella que alguna vez fue.
Los megabytes y megabytes de Javascript API y JSON cargados en dispositivos inteligentes y un marcado HTML mal diseñado que no es consistente entre las páginas es el principal impulsor de la representación lenta en la actualidad. ¡Su página promedio de noticias de Google tiene más de 6 megabytes de ECMAScript solo para representar un poquito de texto! Jaja
Unos pocos kilobytes de CSS en caché y HTML limpio consistente con huellas de javascript más pequeños se representarán en un agente de usuario a la velocidad de la luz simplemente porque el navegador almacena el marcado de DOM consistente y el CSS, a menos que elija manipular y cambiar eso a través de trucos de javascript circus.
Realmente no hay mucha diferencia en agregar una hoja de estilo css en la cabeza en lugar de usar la funcionalidad de importación. El uso de @import se usa generalmente para encadenar hojas de estilo para que se pueda extender fácilmente. Podría usarse para intercambiar fácilmente diferentes diseños de color, por ejemplo, junto con algunas definiciones generales de css. Yo diría que la principal ventaja / propósito es la extensibilidad.
También estoy de acuerdo con el comentario de xbonez en que la portabilidad y la capacidad de mantenimiento son beneficios adicionales.
Un lugar donde uso @import es cuando hago dos versiones de una página, inglés y francés. Construiré mi página en inglés, usando main.css. Cuando genere la versión francesa, enlazaré con una hoja de estilo francesa (main_fr.css). En la parte superior de la hoja de estilo francesa, importaré main.css y luego volveré a definir reglas específicas para las partes que necesito diferentes en la versión francesa.
Use @import en su CSS si está usando un CSS RESET, como Eric Meyer Reset CSS v2.0, por lo que funciona antes de aplicar su CSS, evitando así conflictos.
Voy a interpretar al abogado del diablo, porque odio que la gente esté demasiado de acuerdo.
1. Si necesita una hoja de estilo que depende de otra, use @import. Hacer la optimización en un paso aparte.
Hay dos variables que está optimizando en un momento dado: el rendimiento de su código y el rendimiento del desarrollador . En muchos, si no en la mayoría de los casos, es más importante hacer que el desarrollador sea más eficiente y solo así hacer que el código sea más eficaz .
Si tiene una hoja de estilo que depende de otra, lo más lógico es colocarlas en dos archivos separados y usar @import. Eso tendrá el sentido más lógico para la siguiente persona que vea el código.
(¿Cuándo pasaría tal dependencia? Es bastante raro, en mi opinión, generalmente una hoja de estilo es suficiente. Sin embargo, hay algunos lugares lógicos para colocar cosas en diferentes archivos CSS :)
- Tema: si tiene diferentes esquemas de colores o temas para la misma página, es posible que compartan algunos componentes, pero no todos.
- Subcomponentes: un ejemplo artificial: supongamos que tiene una página de restaurante que incluye un menú. Si el menú es muy diferente del resto de la página, será más fácil de mantener si está en su propio archivo.
Por lo general, las hojas de estilo son independientes, por lo que es razonable incluirlas todas usando <link href> . Sin embargo, si son una jerarquía dependiente, debe hacer lo que tenga más sentido lógico.
Python utiliza la importación; Los usos de C incluyen; JavaScript ha requerido CSS tiene importación; Cuando lo necesites, úsalo!
2. Una vez que llegue al punto donde el sitio necesita escalar, concatene todo el CSS.
Múltiples solicitudes de CSS de cualquier tipo, ya sea a través de enlaces o a través de @imports, son una mala práctica para los sitios web de alto rendimiento. Una vez que esté en el punto en que importa la optimización, todo su CSS debería fluir a través de un minificador. Cssmin combina declaraciones de importación; como @Brandon señala, grunt tiene múltiples opciones para hacerlo también. ( Véase también esta pregunta ).
Una vez que estás en la etapa minificada, <link> es más rápido, como lo ha señalado la gente, así que en la mayoría de los casos puedes vincularlo a algunas hojas de estilo y no importes nada si es posible.
Sin embargo, antes de que el sitio alcance la escala de producción, es más importante que el código esté organizado y sea lógico, en lugar de que vaya un poco más rápido.
utilizando el método de enlace, las hojas de estilo se cargan en paralelo (más rápido y mejor), y casi todos los navegadores admiten enlaces
Importar carga cualquier archivo css extra uno por uno (más lento), y podría darle Flash de contenido sin estilo