Diferença entre @import e link em CSS

Estou aprendendo CSS para ajustar meu modelo de projeto. Cheguei a este problema e não encontrei uma resposta clara na web. Existe uma diferença entre usar @import ou link em CSS?

Uso de @import

@import url(Path To stylesheet.css) 

Uso do Link

  

Qual é a melhor maneira de fazer isso? e porque? Obrigado!

Em teoria, a única diferença entre eles é que @import é o mecanismo CSS para include uma folha de estilo e o mecanismo HTML. No entanto, os navegadores lidam com eles de maneira diferente, oferecendo uma clara vantagem em termos de desempenho.

Steve Souders escreveu um extenso post no blog comparando o impacto de e @import (e todos os tipos de combinações deles) chamado ” don’t use @import “. Esse título praticamente fala por si.

Yahoo! também menciona como uma das melhores práticas de desempenho (co-autoria de Steve Souders): escolha over @import

Além disso, o uso da tag permite que você defina folhas de estilo “preferenciais” e alternativas . Você não pode fazer isso com @import .

Você pode usar o comando import para importar outro CSS dentro de um arquivo css, o que não é possível com o comando link. O navegador realmente antigo não pode (IE4, IE5 parcialmente) manipular a funcionalidade de importação. Além disso, algumas bibliotecas que analisam seu xhtml / html podem falhar ao obter a importação da folha de estilos. Por favor, esteja ciente de que sua importação deve vir antes de todas as outras declarações CSS.

Nenhuma diferença real hoje, mas o @import não é tratado corretamente pelos navegadores mais antigos (Netscape 4, etc.), portanto, o hack @import pode ser usado para ocultar as regras do CSS 2 desses navegadores antigos.

Novamente, a menos que você esteja apoiando navegadores realmente antigos, não há diferença.

Se eu fosse você, no entanto, eu usaria a variante em suas páginas HTML, porque isso permite que você especifique coisas como tipo de mídia (impressão, canvas, etc.).

A diretiva pode permitir que vários css sejam carregados e interpretados de forma assíncrona.

a diretiva @import força o navegador * a esperar até que o script importado seja carregado em linha com o script pai antes que ele possa ser processado corretamente pelo mecanismo, já que tecnicamente é apenas um script.

Muitos scripts de minimização de CSS (e linguagens como less ou sass) irão concatenar automaticamente os scripts vinculados no script principal, uma vez que ele acaba causando menos sobrecarga de transferência.

* (depende do navegador)

Este artigo pode ser útil aqui: 4 methods de adição de CSS a HTML: link, incorporar, embutir e importar

Quando eu uso a regra @import, geralmente é para importar uma folha de estilo dentro de uma folha de estilo existente (embora eu não goste de fazer isso para começar). Mas para responder a sua pergunta, não, eu não acredito que haja alguma diferença. Apenas certifique-se de colocar o URL entre aspas duplas para estar em conformidade com o XHTML válido.

@import geralmente é usado para ser usado em uma folha de estilos externa em vez de inline como no seu exemplo. Se você realmente quisesse ocultar uma folha de estilo de navegadores muito antigos, poderia usá-la como uma invasão para impedir que eles usassem essa folha de estilo.

No geral, a tag é processada mais rapidamente que a regra @import (que aparentemente é um pouco lenta no que diz respeito ao mecanismo de processamento css).