@import | Arquitetura CSS: descomplicando os problemas

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?

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 =)