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?