Sabemos que hay dos formas de hacer referencia a CSS externo en páginas web, a saber: @import y link. A menudo escuchamos a la gente decir que es mejor usar un enlace para introducir CSS, pero ¿sabes por qué?
enlace 
Código fuente de ejemplo
[www.downcodes.com] El enlace sirve para conectar CSS externo a la página web. El formulario específico es <link href="http://www.downcodes.com/styles.css" type="text/css" />.
@importar 
Código fuente de ejemplo
[www.downcodes.com] La diferencia entre importar y vincular es que puede introducir varios otros archivos CSS en un solo archivo CSS. El formulario específico es <style type="text/css">@import url("http://www.downcodes.com/styles. .css");</estilo>
Por qué usar @import
La mayoría de la gente usa @import porque los navegadores antiguos no admiten @import, lo que significa que podemos usar @import para introducir estilos CSS que solo los navegadores modernos pueden analizar.
Utilice el siguiente código para evitar que los navegadores IE6 y anteriores analicen el CSS (los métodos siguientes a IE6 están en mal estado y se omitirán aquí)
@importar URL(../style.css) pantalla;
Otra razón principal es cuando su página web necesita introducir varios archivos CSS externos. Debe usar un enlace para introducir un CSS y luego usar el método @import para introducir varios otros archivos CSS en este archivo CSS.
¿Por qué utilizar el enlace?
Una de las razones principales para utilizar el método de enlace es que puede permitir a los usuarios cambiar de estilo CSS. Todos los navegadores modernos como Firefox, Opera y Safari admiten el atributo rel="hoja de estilo alternativa" (es decir, puede elegir diferentes estilos). en el navegador). Por supuesto, también puede utilizar Javascript para permitir que IE admita a los usuarios que cambian de estilo.
Pequeños problemas con @import Si la etiqueta principal de su página web es muy simple, con solo el atributo @import. Cuando el usuario navega a una velocidad de Internet lenta, verá una página sin estilos y luego se mostrará el archivo CSS. descargado. Puede ver el estilo adecuado. Para evitar este problema, debe asegurarse de que haya al menos un script o etiqueta de enlace en el encabezado.
¿Qué método debería usarse? En la actualidad, parece que para sitios web pequeños, es más apropiado (o más popular) usar enlaces. Por supuesto, si necesitamos modularizar CSS en el futuro, definitivamente usaremos @import.
El artículo está parcialmente traducido de ¿Cuál es la diferencia entre @import y un enlace para CSS con fines de aprendizaje? Bienvenido a agregarlo.