Los diferentes sitios incluyen sus Hojas de estilo en cascada de diferentes formas, ya sea mediante el método @import o mediante el enlace a ese archivo CSS. ¿Cuál es la diferencia entre @import y link para CSS, y cómo decidiste cuál es mejor para ti?
La diferencia entre @import y Link
La vinculación es el primer método para incluir una hoja de estilo externa en sus páginas web. Tiene la intención de vincular su página con su hoja de estilo. Se agrega a la cabeza de tu Documento HTML.
La importación le permite importar una hoja de estilo a otra. Esto es ligeramente diferente al escenario de vínculos porque puede importar hojas de estilo dentro de una hoja de estilo vinculada.
Desde el punto de vista de los estándares, no hay diferencia entre vincular a una hoja de estilo externa o importarla. Cualquiera de las dos formas es correcta y funcionará igualmente bien en la mayoría de los casos. Sin embargo, existen algunas razones por las que es posible que desee utilizar una sobre la otra.
¿Por qué usar @import?
Hace muchos años, la razón más común que se dio para usar @import en su lugar (o junto con) es porque los navegadores más antiguos no reconocían @import, por lo que podía ocultarles estilos. Al importar sus hojas de estilo, esencialmente las pondría a disposición de los navegadores más modernos y que cumplen con los estándares, mientras que las "oculta" de la versiones anteriores del navegador.
Otro uso del método @import es utilizar varias hojas de estilo en una página, mientras que solo se incluye un enlace en el encabezado del documento. 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. Vinculando a la hoja de estilo de la subsección e importando los estilos globales en la parte superior de ese estilo hoja, 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 las reglas de @import deben ir antes que el resto de sus reglas de estilo. Herencia todavía puede ser un problema.
¿Por qué utilizar Link?
La razón número uno para usar hojas de estilo vinculadas es proporcionar hojas de estilo alternativas para sus clientes. Los navegadores como Firefox, Safari y Opera admiten el atributo rel = "hoja de estilo alternativa" y cuando hay uno disponible, los espectadores pueden cambiar entre ellos. También puede usar un conmutador de JavaScript para cambiar entre hojas de estilo en IE, que se usa con mayor frecuencia con Diseños de zoom con fines de accesibilidad.
Uno de los inconvenientes de usar @import es que si tiene un encabezado muy simple con solo la regla @import, sus páginas pueden mostrar un "destello de contenido sin estilo" mientras se cargan. Una solución simple para esto es asegurarse de tener al menos un enlace adicional o elemento de secuencia de comandos en su cabeza.
¿Qué pasa con el tipo de medio?
Muchos escritores afirman que puede usar el tipo de medio para ocultar hojas de estilo de los navegadores más antiguos. A menudo, mencionan esta idea como un beneficio de usar @import o, pero puede configurar los medios escriba con cualquiera de los métodos, y los navegadores más antiguos que no admiten tipos de medios no los verán en ninguno de los dos caso.
Entonces, ¿qué método debería utilizar?
La mayoría de los desarrolladores de hoy utilizan enlaces y luego importan hojas de estilo a hojas de estilo externas. De esa manera, solo tiene una o dos líneas de código para ajustar en sus documentos HTML. Pero la conclusión es que depende de usted. Si te sientes más cómodo con @import, ¡adelante! Ambos métodos cumplen con los estándares y, a menos que planee admitir navegadores realmente antiguos, no hay una razón sólida para usarlos.