12

Criei um arquivo contendo padrões de css que são usados no meu sistema. Gostaria de saber qual e a diferença entre chamar o css pelo link ou pelo @import assim:

/* ou dentro do codEventos.css */

@import "../padrao.css";
<link rel="stylesheet" href="padrao.css">
<link rel="stylesheet" href="codEventos.css">

Quais são as vantagens/desvantagens?

Li em um link: dont-use-import que há uma grande diferença em desempenho, visto que o link consegue carregar o css em paralelo fazendo ter mais desempenho sobre o @import,claro não são todos os browsers que intepretam assim.

1
  • Não tenho como detalhar uma resposta no momento, mas se eu não estiver enganado <link> vai trabalhar em uma base do path da página que a chamou e o @import pode trabalhar bem diferente, ou seja haverá em "alguns casos" diferenças no uso de url()
    – Syzoth
    Commented 3/07/2015 às 14:59

2 Respostas 2

9

Na teoria, a única diferença entre eles é que @import é o mecanismo CSS para incluir uma folha de estilos e <link> é o mecanismo HTML para fazer o mesmo. Contudo, cada browser as manipula de formas diferentes, dando ao <link> uma clara vantagem em termos de performance.

Steve Sourders escreveu um extenso artigo em seu blog, comparando o impacto de ambos <link> e @import (e todas as possíveis combinações entre eles) chamado "don't use @import" ("Não use @import"). O título já diz tudo.

Yahoo! também o menciona como uma de suas melhores escolhas de performance (em co-autoria com Steve Sourders): Choose <link> over @import. ("Escolha <link> em vez de @import").

Além disso, usar a tag <link> permite a você definir páginas de estilo "preferidas" e alternativas. Você não pode fazer isso com @import.

Esta é uma tradução na íntegra da resposta em inglês para essa mesma pergunta, a qual se encontra em https://stackoverflow.com/a/1022715/1639385

2
  • 1
    Boa resposta! #UlyssesAlves +1 Commented 13/04/2017 às 1:15
  • 1
    Obrigado, @AlíciaTairini Mas os créditos na verdade são do mercator, autor da resposta original em inglês ;) Commented 13/04/2017 às 12:11
0

Não existe diferenças basicamente, o link é o método do html de chamar um stylesheet, o @import o do css.

No entanto, os browser interpretam eles de uma maneira diferente, onde o link tem vantagem em termos de performance.

Caso entenda inglês confira essa reposta : https://stackoverflow.com/questions/1022695/difference-between-import-and-link-in-css

Abraço

0

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .