Sabemos que existem duas maneiras de referenciar CSS externo em páginas web, a saber: @import e link Muitas vezes ouvimos dizer que é melhor usar link para introduzir CSS, mas você sabe por quê?
link 
Exemplo de código-fonte
[www.downcodes.com] O link serve para conectar CSS externo à página da web. O formulário específico é <link href="http://www.downcodes.com/styles.css" type="text/css" />.
Exemplo de código-fonte
[www.downcodes.com] A diferença entre importar e vincular é que ele pode introduzir vários outros arquivos CSS em um arquivo CSS. O formato específico é <style type="text/css">@import url("http://www.downcodes.com/ estilos. .css");</style>
Por que usar @import
A maioria das pessoas usa @import porque navegadores antigos não suportam @import, o que significa que podemos usar @import para introduzir estilos CSS que somente navegadores modernos podem analisar.
Use o código a seguir para evitar que os navegadores IE6 e anteriores analisem o CSS (os métodos abaixo do IE6 estão inutilizáveis e serão omitidos aqui)
tela @import url(../style.css);
Outro motivo principal é quando sua página da web precisa introduzir vários arquivos CSS externos. Você precisa usar o link para introduzir um CSS e, em seguida, usar o método @import para introduzir vários outros arquivos CSS neste arquivo CSS.
Por que usar link
Uma das principais razões para usar o método link é que você pode permitir que os usuários alternem os estilos CSS. Navegadores modernos como Firefox, Opera e Safari suportam o atributo rel="folha de estilo alternativa" (ou seja, você pode escolher estilos diferentes. no navegador). Claro, você também pode usar Javascript para permitir que o IE ofereça suporte à mudança de estilo dos usuários.
Pequenos problemas com @import. Se a tag head da sua página web for muito simples, apenas com o atributo @import. Quando o usuário navegar em uma velocidade lenta da Internet, ele verá uma página sem estilos, e então o arquivo CSS será. baixado. Você pode ver o estilo adequado. Para evitar esse problema, você precisa garantir que haja pelo menos um script ou tag de link no cabeçalho.
Qual método deve ser usado? Atualmente, parece que para sites pequenos é mais apropriado (ou mais popular) usar link. Claro, se precisarmos modularizar CSS no futuro, definitivamente usaremos @import.
O artigo foi parcialmente traduzido de Qual é a diferença entre @import e link para CSS para fins de aprendizagem, bem-vindo.
