Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

@import

Olá a todos olhando o seguinte código:

<link href="./assets/css/normalize.css" rel="stylesheet" />
    <link href="./assets/css/reset.css" rel="stylesheet" />
    <link rel="stylesheet" href="./assets/css/cabecalho.css">
    <link rel="stylesheet" href="./assets/css/menu/menu-lista.css">
    <link rel="stylesheet" href="./assets/css/menu/menu-item.css">
    <link rel="stylesheet" href="./assets/css/menu/menu-link.css">
    <link rel="stylesheet" href="./assets/css/banner/banner.css">
    <link rel="stylesheet" href="./assets/css/banner/banner-titulo.css">
    <link rel="stylesheet" href="./assets/css/banner/banner-imagem.css">
    <link rel="stylesheet" href="./assets/css/sobre/sobre.css">
    <link rel="stylesheet" href="./assets/css/sobre/sobre-titulo.css">
    <link rel="stylesheet" href="./assets/css/sobre/sobre-descricao.css">
    <link rel="stylesheet" href="./assets/css/receitas.css">
    <link rel="stylesheet" href="./assets/css/receita/receita.css">
    <link rel="stylesheet" href="./assets/css/receita/receita-botao.css">
    <link rel="stylesheet" href="./assets/css/receita/receita-descricao.css">
    <link rel="stylesheet" href="./assets/css/receita/receita-conteudo.css">
    <link rel="stylesheet" href="./assets/css/receita/receita-imagem.css">
    <link rel="stylesheet" href="./assets/css/receita/receita-titulo.css">
    <link rel="stylesheet" href="./assets/css/quemSomos/quemSomos.css">
    <link rel="stylesheet" href="./assets/css/quemSomos/quemSomos-titulo.css">
    <link rel="stylesheet" href="./assets/css/quemSomos/quemSomos-descricao.css">
    <link rel="stylesheet" href="./assets/css/pessoas.css">
    <link rel="stylesheet" href="./assets/css/pessoa/pessoa.css">
    <link rel="stylesheet" href="./assets/css/pessoa/pessoa__funcao.css">
    <link rel="stylesheet" href="./assets/css/pessoa/pessoa__imagem.css">
    <link rel="stylesheet" href="./assets/css/pessoa/pessoa__nome.css">
    <link rel="stylesheet" href="./assets/css/rodape.css">
    <link rel="stylesheet" href="./assets/css/logo.css">

Me incomodou essa quantidade de importações de estilos no html e fui pesquisar um alternativa. Encontrei o @import do css, que aliás parece ter um bom suporte por boa parte dos navegadores inclusive mobile: https://developer.mozilla.org/pt-BR/docs/Web/CSS/@import#compat-desktop

A possibilidade de fazer isso:

<!-- código omitido -->
<link rel="stylesheet" href="./assets/css/main.css">
<!-- código omitido -->

e isso (arquivo main.css):

@import url("./reset.css");
@import url("./normalize.css");
@import url("./cabecalho.css");
@import url("./logo.css");
@import url("./pessoas.css");
@import url("./receitas.css");
@import url("./receita/receita-botao.css");
@import url("./receita/receita-conteudo.css");
@import url("./receita/receita-descricao.css");
@import url("./receita/receita-imagem.css");
@import url("./receita/receita-titulo.css");
@import url("./receita/receita.css");
@import url("./rodape.css");
@import url("./banner/banner-imagem.css");
@import url("./banner/banner-titulo.css");
@import url("./banner/banner.css");
@import url("./menu/menu-item.css");
@import url("./menu/menu-link.css");
@import url("./menu/menu-lista.css");
@import url("./pessoa/pessoa.css");
@import url("./pessoa/pessoa__funcao.css");
@import url("./pessoa/pessoa__imagem.css");
@import url("./pessoa/pessoa__nome.css");
@import url("./quemSomos/quemSomos-descricao.css");
@import url("./quemSomos/quemSomos-titulo.css");
@import url("./quemSomos/quemSomos.css");
@import url("./sobre/sobre-descricao.css");
@import url("./sobre/sobre-titulo.css");
@import url("./sobre/sobre.css");

com um arquivo importando todo o css e abstraindo todas as importações me pareceu maravilhosa. Existe alguma pegadinha nisso em relação a compatibilidade desempenho ou algo que possa desencorajar essa forma de importar os arquivos css através de um único arquivo?

2 respostas
solução!

Oi Felipe, tudo bem?

Confesso que eu não conhecia essa prática do próprio CSS de importar arquivos diferentes! Na verdade, essa prática de importar arquivos é muito comum quando você utiliza o SASS, um pré-processador CSS que dá "super-poderes" ao CSS.

Realmente, o primeiro código me parece muito ilegível, são vários arquivos CSS para serem referenciados. A sua solução me parece incrível!

No SASS, o comportamento seria bem parecido, seria algo como:

@import 'sobre';
@import 'receita';
@import 'rodape';
// E assim por diante...

Aqui na Alura, nós temos um curso sobre SASS: Sass: O CSS com superpoderes, e você pode entender melhor do que estou falando!

Pelo que eu pude pesquisar, em questão de desempenho, performance, ou compatibilidade, não há nada que interrompa o uso dessa prática com CSS. A única barreira que eu vejo é que cada vez que utilizamos o @import no código, é criada uma nova solicitação HTTP, uma vez que isso ocorre no lado do cliente. Portanto, a partir dessa perspectiva, você pode estar prejudicando os visitantes com conexões lentas. No SASS, isso não acontece, já que tudo é transpilado para um único arquivo CSS final, bem otimizado.

Espero ter ajudado, bons estudos =)

Bom saber vou fazer também esse curso de Sass. Obrigado pela dica.