Existem várias maneiras de aplicar estilos CSS a uma página da Web, incluindo folhas de estilo externas ou até estilos inline. Se você estiver usando uma folha de estilos externa, que é a maneira recomendada de ditar a aparência de um documento HTML, uma abordagem é usar
@importar.
o
@importar A regra permite que você tenha folhas de estilo externas importantes em seu documento - seja em uma página HTML ou mesmo em outros documentos CSS. A divisão de vários estilos em vários arquivos menores e focalizados (um para layout, um para tipografia, um para imagens, etc.) pode, às vezes, facilitar o gerenciamento desses arquivos e dos vários estilos que eles contêm. Se você quiser aproveitar esse benefício, importe os vários arquivos para fazer com que todos trabalhem para a exibição da sua página da web.
Importando para HTML
Para usar o
@importar regra em seu HTML, você adicionaria o seguinte ao
do documento:
:
Este código agora importaria esta folha de estilo para uso nesta página HTML e você poderia gerenciar todos os seus estilos nesse único arquivo. A desvantagem de folhas de estilo importantes dessa maneira é que esse método não permite downloads paralelos. A página deve fazer o download de uma folha de estilo inteira antes de passar para o restante da página, incluindo todos os outros arquivos CSS que você está importando usando esse método. Isso terá um efeito negativo na velocidade da sua página e no desempenho do download. Considerando o quão importante é o desempenho da página para o sucesso do site, essa desvantagem por si só pode ser um motivo pelo qual você deve evitar o uso de @import.
Abordagem alternativa
Como alternativa ao uso
@importar em seu HTML, você pode vincular a esse arquivo CSS assim:
Isso funciona de forma muito semelhante ao
@importar na medida em que permite gerenciar todo o seu CSS a partir de um local / arquivo central, mas esse método é preferível a partir de uma perspectiva de download. Se você ainda quiser segmentar diferentes tipos de estilos em arquivos separados, poderá continuar a usá-los e usar a funcionalidade @import dentro de seu arquivo CSS mestre. Isso significa que seus arquivos CSS externos ainda podem ser gerenciados individualmente, mas como todos eles são importados para um CSS principal, o desempenho é aprimorado.
Importando para CSS
Usando o
exemplo de código acima traria o arquivo "default.css" para usar em sua página HTML. Dentro desse arquivo CSS, você teria seus vários estilos de página. Você pode ter todos esses estilos detalhados nessa única página, ou você pode usar @import para separá-los para facilitar o gerenciamento. Mais uma vez, digamos que estamos usando 4 arquivos CSS separados - um para layout, um para tipografia e um para imagens. O quarto arquivo é o nosso arquivo "mestre", ao qual nossa página está vinculada (neste exemplo, "default.css"). No topo desse arquivo CSS mestre, podemos adicionar as regras mostradas abaixo:
@import url ('/ styles / layout.css'); @ importar url ('/ styles / type.css'); @ importar url ('/ styles / images.css');
Note que estas regras devo antes de todos os outros conteúdos em seu arquivo CSS para eles funcionarem. Você não pode ter outro estilo CSS antes dessas regras de importação.
Abaixo dessas regras de importação, você pode adicionar quaisquer outros estilos CSS que desejar em sua planilha padrão. Quando esse arquivo CSS principal é carregado, ele primeiro importa esses arquivos separados e adiciona seus estilos ao topo da folha de estilo. Ele terá todos os seus outros estilos abaixo dos importados, criando o arquivo CSS completo que o navegador usará para exibir seu site. Você obtém o benefício de gerenciar arquivos menores e mais focados, mantendo uma única folha de estilo vinculada a esse HTML.
Usando @import para consultas de mídia
Uma coisa que você pode considerar é separar as consultas de mídia do seu site para criar estilos responsivos em um arquivo separado. Como esses estilos responsivos podem ser confusos quando vistos ao lado de outras regras de estilo do seu site, tê-los por conta própria em um arquivo diferente pode ser atraente. Uma preocupação com esta abordagem é que, desde o seu
@importar regras devem ser primeiro, isso significa que suas consultas de mídia seriam carregadas antes do restante dos estilos do seu site. Ao criar um site responsivo pela primeira vez em dispositivos móveis que leve em conta o desempenho, isso provavelmente será um problema. Por esse motivo, sugerimos que você não separe os estilos responsivos do site separadamente e use
@importar para trazê-los para o seu site. Sim, parece haver benefícios em fazê-lo, mas as desvantagens superam esses benefícios.
Preciso usar o @import?
Não, você não. Muitos sites simplesmente exibem todos os seus principais estilos dentro de um arquivo e, tão grande quanto esse arquivo pode ser, ele é gerenciado dessa maneira (é assim que faço no meu próprio trabalho). Se você achar
@importar útil, pode fazer parte do seu fluxo de trabalho. Caso contrário, você pode criar páginas da Web com segurança sua única folha de estilo de todas as suas regras CSS.
Suporte de Navegador
Navegadores muito antigos têm problemas com algumas dessas regras @import, mas é improvável que esses navegadores sejam um problema para você nos dias de hoje. Isso é especialmente verdadeiro agora que o prazo final de vida útil para versões mais antigas do Internet Explorer já passou. Por fim, se você decidir usar
@importar regras em seu HTML ou CSS, você não deve se deparar com problemas com versões legadas de navegadores da web, a menos que você tenha alguma estranha necessidade de suportar versões incrivelmente antigas do IE.
Editado por Jeremy Girard
