Entrar Ainda não tem acesso?
1
resposta

[Dúvida] Dúvida referente a importação do CSS na arquitetura Atômica

Referente ao curso Arquitetura CSS: descomplicando os problemas, no capítulo Layout base e Estilização de cabeçalho e atividade Faça como eu fiz na aula

por PATRIK ALAN RUFINO
| 55.8k xp | 5 posts
Operador Setorial

A ideia de separar os elementos de estilos da nossa página dividindo-as de forma atômica é muito interessante.

Porém me pareceu algo um pouco desvantajoso quando se trata da importação destes arquivos css.

No caso de uma página com muitos elementos por exemplo, quantas importações não teriam que ser feitas?

O quanto isso impacta na performance da nossa página?

Uma solução que encontrei foi importar todos os componentes para o arquivo "style.css:

@import url(cabecalho.css);
@import url(menu/menu-item.css);
@import url(menu/menu-link.css);
@import url(menu/menu-lista.css);

Porém isso é o suficiente para resolver as questões apresentadas acima?

1 resposta
por Ivan Soares Correia
| 137k xp | 39 posts
Fotógrafo e Editor de Vídeos

Boa noite, Patrik. A atomização atende, principalmente, o quesito manutenibilidade. A título de exemplo, abre o DevTools nessa página aqui e veja no < head > quantos arquivos CSS diferente a própria Alura usa. Em projetos de grande escopo um arquivo único se torna inviável de ser mantido, especialmente por uma equipe com mais de um dev.

Em relação a performance, na verdade fracionar os arquivos (em alguns casos até com inclusão de < style > dentro do HTML e algumas vezes até inline) as vezes até ajuda a performance, especialmente em casos onde cabe a metodologia lazy loading (a página só carrega seus elementos conforme o usuário vai descendo ao longo dela).

De qualquer forma, atomização não é bala de prata e sua utilização muito vinculada ao contexto de cada projeto.

Abaixo te deixo um tópico do Stack Overflow com uma boa resposta do Renan Gomes (ele é um excelente contribuidor na versão em português do site). Lá ele vai cobrir bem o contexto da atomização em mais detalhes.

https://pt.stackoverflow.com/questions/67499/folha-de-estilo-diferente-para-cada-p%C3%A1gina-ou-somente-uma

Espero ter ajudado, grande abraço.