O desenvolvimento de sites front-end é frequentemente representado como um banquinho de três pernas composto de:
- HTML para a estrutura de um site
- CSS para os estilos visuais
- Javascript para comportamentos
A segunda perna deste banco, Cascading Style Sheets, suporta três estilos diferentes que você pode adicionar a um documento.
- Estilos embutidos
- Estilos incorporados
- Estilos externos
Cada um desses estilos CSS apresenta vantagens e desvantagens exclusivas.
Estilos embutidos
Estilos embutidos são estilos escritos diretamente na tag do documento HTML. Os estilos embutidos afetam apenas a tag específica à qual são aplicados:
Esta regra CSS desativa a decoração de texto sublinhado padrão para este link. No entanto, isso não mudaria nenhum outro link na página. Esta é uma das limitações dos estilos embutidos. Uma vez que eles mudam apenas em um item específico, você precisaria encher seu HTML com esses estilos para obter um design de página unificado. Essa não é uma prática recomendada: na verdade, é uma etapa distante dos dias de
Fonte tags e a combinação de estrutura e estilo em páginas da web.Os estilos embutidos também requerem uma especificidade muito alta. Isso torna difícil substituí-los por outros estilos não embutidos. Por exemplo, se você deseja tornar um site responsivo e alterar a aparência de um elemento em determinados pontos de interrupção usando consultas de mídia, os estilos embutidos em um elemento tornam isso difícil de fazer.
Os estilos embutidos são apropriados apenas quando você os usa com moderação, na abordagem de "exceção à regra" que separa um ou dois elementos de seus pares na página.
Estilos Embutidos
Os estilos incorporados residem no cabeçalho do documento. Eles estão envoltos em tags e se parecem muito com arquivos CSS externos dentro dessa parte do documento.
Os estilos incorporados afetam apenas as marcas na página em que estão incorporados. Mais uma vez, essa abordagem nega um dos pontos fortes do CSS. Uma vez que cada página apresenta estilos definidos no cabeçalho, se você quiser fazer uma mudança em todo o site - como mudar a cor de links de vermelho para verde - você precisaria fazer essa alteração em todas as páginas, já que todas usam um estilo Folha. Essa abordagem é melhor do que os estilos embutidos, mas ainda é problemática em muitos casos.
Folhas de estilo que são adicionadas ao cabeçalho de um documento também adicionam uma quantidade significativa de código de marcação a essa página, o que também pode tornar a página mais difícil de gerenciar no futuro.
A vantagem das folhas de estilo incorporadas é que elas são carregadas imediatamente com a própria página, em vez de exigir que outros arquivos externos sejam carregados. Essa técnica pode ser uma vantagem de uma perspectiva de desempenho e velocidade de download.
Folhas de estilo externas
A maioria dos sites hoje usa folhas de estilo externas. Estilos externos são estilos que são escritos em um documento separado e, em seguida, anexados a vários documentos da web. Eles são chamados para o documento principal usando um tag no cabeçalho do documento. As folhas de estilo externas podem residir no mesmo servidor que o HTML ou podem ser obtidas de outro servidor inteiramente. Geralmente, esse é o caso de ativos, como fontes, que muitos sites pegam emprestado do Google.
Folhas de estilo externas afetam qualquer documento ao qual estão anexados, o que significa que se você tiver um site de 20 páginas em que cada página usa a mesma folha de estilo (normalmente é assim que isso é feito), você pode fazer uma mudança visual em cada uma dessas páginas simplesmente editando aquele estilo Folha. Essa economia torna o gerenciamento de sites a longo prazo muito mais fácil.
A maioria dos web designers profissionais usa um arquivo CSS principal para controlar o layout e o design de um site.
A desvantagem das folhas de estilo externas é que elas requerem páginas para buscar e carregar esses arquivos externos. Nem todas as páginas usarão todos os estilos da folha CSS, portanto, muitas páginas carregarão uma página CSS muito maior do que a necessária.
Embora seja verdade que há um impacto no desempenho de arquivos CSS externos, certamente pode ser minimizado. Realisticamente, os arquivos CSS são apenas arquivos de texto, portanto, não são grandes para começar. Se todo o seu site usar um único arquivo CSS, você também terá o benefício de esse documento ser armazenado em cache depois de ser inicialmente carregado, o que significa que pode haver um leve impacto no desempenho na primeira página para algumas visitas, mas as páginas subsequentes usarão o arquivo CSS em cache, portanto, qualquer resultado seria negado.