CSS Interno Externo ou InLine? Entenda as diferenças e oque gera de bom ou ruim na aplicação!

Olá pessoal tive uma dúvida hoje e resolvi ao invés de colocar somente a dúvida aqui vir também com a resposta pra ela hahah espero que gostem do resumo que fiz!!

CSS Interno:

O CSS interno ou incorporado requer que você adicione as tags na seção do seu documento HTML. Ele é um método mais efetivo de estilizar um projeto que contenha uma única página, contudo se seu projeto requer mais páginas o ideal é usar um outro método veja as vantagens e em seguida as desvantagens desse primeiro método de estilização.

*Vantagens:

  1. As Classes e Seletores de Id’s podem ser usadas por stylesheet interno.

  2. Não há a necessidade de carregar vários arquivos HTML e CSS uma vez que estão no mesmo arquivo.

Desvantagens:

  1. Adicionar a estilização no HTML pode aumentar o tamanho do seu arquivo oque vai fazer a página da sua aplicação precisar de mais tempo de carregamento.

CSS EXTERNO

Com o CSS externo, você vai ‘linkar’ as páginas da internet com um arquivo .css externo, que você pode criar usando qualquer editor de texto no seu dispositivo (ex.:VS Code).

Este tipo de CSS é um método mais eficiente, especialmente se você está estilizando um site grande. Ao editar um arquivo .css , você pode modificar um site inteiro de uma só vez.

VANTAGENS:

  1. Como o código CSS está num documento separado, os seus arquivos HTML terão uma estrutura mais limpa e serão menores

  2. O mesmo arquivo .css pode ser usado em várias páginas.

DESVANTAGENS:

  1. Até que o CSS externo seja carregado, a página pode não ser processada corretamente.

  2. Fazer o upload ou links para múltiplos arquivos CSS pode aumentar o tempo de download do seu site.

CSS InLine

O CSS inline é usado para dar estilo a um elemento HTML específico. Para este estilo de CSS< você somente vai precisar adicionar o atributo style para cada tag HTML, sem usar os seletores. Este tipo de CSS não é realmente recomendado, já que cada tag HTML precisa ser estilizada de maneira individual. Gerenciar o seu site pode se tornar uma tarefa bem difícil. Contudo, o CSS nline no HTML pode ser útil para algumas situações. Por exemplo, em casos onde você não tem acesso aos arquivos CSS ou precisa aplicar estilos para um elemento único.

VANTAGENS:

  1. Você pode inserir elementos CSS de maneira fácil e rápida numa página HTML. É por isso que esse método é útil para testar e pré-visualizar mudanças, assim como executar correções rápidas no seu site.

  2. Você não precisa criar e fazer upload de um documento separado como no estilo externo.

DESVANTAGENS:

  1. Adicionar regras CSS para cada elemento HTML consome muito tempo e faz a sua estrutura HTML ficar bagunçada.

  2. Estilizar múltiplos elementos pode afetar o tamanho da sua página e o tempo para download.

CONCLUSÃO

Na minha opinião todos os modelos de utilizar a estilização no HTML podem ser usados dependendo do tipo de projeto que você está criando, contudo cada item do projeto deve ser levado em consideração, eu mesmo já passei por situações onde vi a aplicação de cada um e o resultado ficou muito bom!!

Espero que tenha ajudado na dúvida de alguém por que essa foi uma dúvida que tive!! :grin:

Referência de pesquisa: CSS Inline, Interno ou Externo: Entenda a Diferença entre eles

7 Likes

Parabéns pela iniciativa @FelipeJoseph ! Quando você coloca o CSS em outro arquivo fica mais facil de fazer manutenção, e fica melhor organizado também! Sucesso ai no aprendizado!

1 Like

Muito legal, @FelipeJoseph! Valeu pela iniciativa e o resumão. Só uma sugestão: colocar alguns exemplos :star_struck: Bons estudos!

3 Likes

valeu @GustavoTonolli boa sorte pra todos nós nessa caminhada!!

1 Like

@adrianoarrigo Eu pensei em colocar também mas embora iria ilustrar bem fiquei com receio de o tópico ficar muito extenso mas valeu demais pela observação!! Pra você também ótimos estudos!!

1 Like

Parabéns @FelipeJoseph !
Acho que linkando em outro arquivo deixa o codigo bem mais organizado, valeu pelo resumo!
Sucesso pra nós :rocket:

1 Like

Estava doido pra entrar aqui no VTEX Community pra tirar exatamente essa duvida, muito boa a explicação.

Tenho uma dúvida relacionada a esse tipo de seleção do CSS (Interno e externo), ele pode interferir no SEO ?

Fico feliz demais de poder te ajudar @Aelander , sempre que tiver um tempo aqui vou tentar trazer algo bem útil pra comunidade ótimos estudos!!

muito obrigado @Thiago_Paes !! Vamo que vamo ajudar essa galera!!

Sobre a sua dúvida se impacta no SEO, eu andei pesquisando e o que eu consegui encontrar foi que é considerado uma boa prática utilizar o CSS externo porque seu código fica visualmente mais limpo e organizado, e isso conta muito ponto nessa questão de SEO, além claro de facilitar a manutenção do seu código por você no futuro, ou por outra pessoa!!