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
- Economiza tempo na abordagem de copiar e colar o mesmo código em cada arquivo ou adicionar links.
- Bom para construir projetos organizacionais de médio a grande porte.
- 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.
Top comments (0)