Nota: apenas traduzi o texto abaixo e postei aqui. As referências estão no fim deste artigo.

Todos nós devemos ter usado @import em nossos arquivos CSS para importar uma stylesheet dentro de outra stylesheet. Ao trabalhar em grandes projetos, frequentemente utilizamos imports para usar os mesmos styles em diferentes views.

A declaração @import tem alguns prós e contras relacionados a ela. Vamos primeiro discutir como funciona a importação usando o <link> element no arquivo HTML.

Pessoalmente, prefiro usar mídia em vez de texto para entender quaisquer conceitos e também gosto de usá-los em meus artigos. 😅

Então, vamos tentar entender a diferença entre usar @import e <link> element para carregar arquivos CSS seguido dos prós e contras da declaração @import.

Funcionamento da declaração @import

No exemplo acima, podemos ver que a importação de stylesheets entre si cria um gráfico de dependência. Devido a esta árvore de dependências, o arquivo css base, que é homeview.css, é baixado primeiro e, em seguida, os arquivos css dependentes são baixados, que são button.css e form.css.

Funcionamento do <link> element

Quando stylesheets são carregadas usando link elements, elas são baixadas ao mesmo tempo, ou seja, o navegador pode baixar todas essas stylesheets em paralelo.

Já cobrimos a principal diferença entre as duas abordagens, agora vamos nos concentrar nos prós e contras da declaração @import.

Prós de usar CSS @import

1. Economiza tempo na abordagem de copiar e colar o mesmo código em cada arquivo ou adicionar links.
2. Bom para construir projetos organizacionais de médio a grande porte.
3. Crie o arquivo CSS primário e importe outros arquivos, como typography ou images. Essa forma de gerenciar arquivos CSS é simples, mas eficaz e ajuda a manter uma boa estrutura do projeto.

Contras de usar CSS @import

O único aspecto negativo que vem com a declaração @import é aumentar o tempo de carregamento da página se não for usado durante o processo de build. À medida que avança e lê os imports e depois os aplica. Embora a diferença de tempo seja muito pequena, pode impactar seu search ranking, onde os bots usam o tempo de carregamento da página para calcular o ranking.

Tentei cobrir resumidamente todos os pontos principais de @import que definem o fluxo e o funcionamento da declaração CSS. 😊

Deixe-me saber se perdi alguma coisa 😉

Feliz aprendizado! 👩‍💻

Fonte

Artigo escrito por Jasmin Virdi.