Diferencia entre @import y link en CSS

Estoy aprendiendo algo de CSS para modificar la plantilla de mi proyecto. Llegué a este problema y no encontré una respuesta clara en la web. ¿Hay alguna diferencia entre usar @import o un enlace en CSS?

Uso de @import

<style>@import url(Path To stylesheet.css)</style>

Uso de enlace

<link rel="stylesheet" href="Path To stylesheet.css">

¿Cuál es la mejor manera de hacerlo? ¿y por qué? ¡Gracias!

En teoría, la única diferencia entre ellos es que @importes el mecanismo CSS para incluir una hoja de estilo y <link>el mecanismo HTML. Sin embargo, los navegadores los manejan de manera diferente, lo que brinda <link>una clara ventaja en términos de rendimiento.

Steve Souders escribió una extensa publicación de blog comparando el impacto de ambos <link>y @import(y todo tipo de combinaciones de ellos) llamado " no use @import ". Ese título habla por sí solo.

Yahoo! también lo menciona como una de sus mejores prácticas de rendimiento (en coautoría con Steve Souders): elija <link>sobre @import

Además, el uso de la <link>etiqueta le permite definir hojas de estilo "preferidas" y alternativas . No puedes hacer eso con @import.

Puede utilizar el comando de importación para importar otro CSS dentro de un archivo css que no es posible con el comando de enlace. El navegador realmente antiguo no puede (IE4, IE5 parcialmente) manejar la funcionalidad de importación. Además, algunas bibliotecas que analizan su xhtml / html podrían fallar al obtener la importación de la hoja de estilo. Tenga en cuenta que su importación debe ir antes que todas las demás declaraciones CSS.

Hoy en día no hay una diferencia real, pero @importlos navegadores más antiguos (Netscape 4, etc.) no lo manejan correctamente, por lo que el @importtruco se puede usar para ocultar las reglas de CSS 2 de estos navegadores antiguos.

Nuevamente, a menos que sea compatible con navegadores realmente antiguos, no hay diferencia.

Sin embargo, si yo fuera usted, usaría la <link>variante en sus páginas HTML, porque le permite especificar cosas como el tipo de medio (impresión, pantalla, etc.).

La directiva <link> puede permitir que se carguen e interpreten múltiples CSS de forma asíncrona.

la directiva @import obliga al navegador * a esperar hasta que el script importado se cargue en línea con el script principal antes de que su motor pueda procesarlo correctamente, ya que técnicamente es solo un script.

Una gran cantidad de scripts de minimización de CSS (y lenguajes como less o sass) concatenarán automáticamente los scripts vinculados en el script principal, ya que terminan causando menos sobrecarga de transferencia.

* (depende del navegador)

Este artículo puede ser de utilidad aquí: 4 métodos para agregar CSS a HTML: vincular, incrustar, en línea e importar

Cuando uso la regla @import, generalmente es para importar una hoja de estilo dentro de una hoja de estilo existente (aunque no me gusta hacerlo para empezar). Pero para responder a su pregunta, no, no creo que haya ninguna diferencia. Solo asegúrese de poner la URL entre comillas dobles para cumplir con XHTML válido.

@import generalmente está destinado a usarse en una hoja de estilo externa en lugar de en línea como en su ejemplo. Si realmente desea ocultar una hoja de estilo de navegadores muy antiguos, puede usarla como un truco para evitar que la usen. 

En general, la <link>etiqueta se procesa más rápidamente que la regla @import (que aparentemente es algo lenta en lo que respecta al motor de procesamiento css).

Microsoft Internet Explorer 9 (MSIE9) no parece manejar @import correctamente. Observe estas entradas de mi registro de Apache (dirección IP oculta pero whoisdijo que era propiedad de Microsoft): el HTML principal vinculado a screen.css que tenía

@import url("print.css") print;
@import url("speech.css") aural;

que ahora estoy a punto de cambiar a linkelementos en el HTML, porque parece que MSIE9 emite dos solicitudes incorrectas al servidor, obteniendo errores 404 que podría prescindir:

[ip] - - [21/Dec/2019:05:49:28 +0000] "GET /screen.css HTTP/1.1" 200 2592 "https://ssb22.user.srcf.net/zhimo/"; "Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0;  Trident/5.0)" ssb22.user.srcf.net
[ip] - - [21/Dec/2019:05:49:28 +0000] "GET /url(%22print.css%22)%20print HTTP/1.1" 404 7498 "https://ssb22.user.srcf.net/zhimo/"; "Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0;  Trident/5.0)" ssb22.user.srcf.net
[ip] - - [21/Dec/2019:05:49:28 +0000] "GET /url(%22speech.css%22)%20aural HTTP/1.1" 404 7498 "https://ssb22.user.srcf.net/zhimo/"; "Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0;  Trident/5.0)" ssb22.user.srcf.net

No eran las solicitudes apropiadas de estos archivos después, pero podemos prescindir de esta "disparar al primer servidor, de análisis urldespués de" la lógica.