Neste artigo veremos a maneira correta de adicionar CSS a uma página web, como também quais não devemos utilizar e os problemas que elas nos trazem
Como adicionar CSS a um projeto?
Hoje temos basicamente três maneiras de adicionar CSS:
- Arquivo externo (maneira correta);
- CSS no head – interno (incorreta menos grave);
- CSS no elemento – inline (incorreta mais grave);
Vamos então abrir os pontos negativos das incorretas, para que você veja os potenciais problemas que podem ser gerados
Aí então falaremos da opção número 1, que julgo a mais correta
É importante citar também que estou tratando de um projeto web sem frameworks JavaScript como Vue, React ou Angular
Pois quando entramos nesse mundo há muito mais variáveis
Por exemplo: alguns frameworks encorajam os seus usuários a estilizar componentes no próprio arquivo de componente
Então nestes casos este artigo não é tão válido, pois pode partir de uma questão de arquitetura de software a diretriz de onde colocar ou não o CSS
CSS Inline
O grande problema de utilizar CSS no meio das tags do HTML é a manutenibilidade do código
Sempre que o elemento que aplicamos estilo inline for modificado, temos que lembrar de mudar este CSS em todas as páginas que ele está
Isso gera uma queda de performance no time de dev, ainda mais se o código estiver versionado
Pode acarretar em várias revisões, por causa de um ajuste em CSS
Um exemplo seria:
<p style="font-size:20px;">Teste</p>
Então toda vez que o parágrafo mudar de tamanho de fonte, teremos que alterar em todos os arquivos que precisarem desta alteração
Além disso o acumulo de regras de CSS pode deixar o HTML e também o CSS impossíveis de serem lidos
Atrapalhando mais uma vez o dev, que tem que separar este emaranhado de coisas para fazer alterações que não deveriam ter complexidade
CSS no head – interno
Um pouco melhor que o inline é adicionar o CSS no head, porém ainda é problemático
Um dos problemas é que esse código é adicionado no HTML, então temos que alterá-lo em todos os arquivos que precisam das modificações também
Gerando problemas de manutenção de código, mas a parte boa é que ele fica sempre no head da página, tendo um lugar fixo e objetivo que o dev vai fazer a alteração
Mas isso gera um outro problema, excesso de código CSS pode deixar seu documento HTML muito grande, tornando um arquivo demasiadamente grande para ser alterado
Pense: vai no HTML faz a modificação, volta a rolagem para o CSS e faz a alteração
Esse vem e vai pode ser muito desgastante
Além disso estamos destinando um peso maior ao arquivo de HTML, o que pode acarretar mais lentidão na hora de carregar a página
Então você também terá problemas de performance
Quer se especializar em Desenvolvimento Web? Veja o nosso catálogo de cursos.
Analisadores de site, como o Google Page Speed, te aconselham a tirar esse tipo de CSS do arquivo de HTML, então é uma boa hora para repensar esta prática
Um exemplo de CSS no head seria:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
a {
display: block;
width: 160px;
height: 40px;
}
</style>
</head>
<body>
<a href="#">Clique aqui!</a>
</body>
</html>Neste caso você perderia a chance de aproveitar esse estilo para a tag a no resto do seu projeto
E sempre que ela fosse modificada, você deveria abrir este arquivo para alterar ela e se tivesse em outros faria o mesmo processo
A maneira correta de adicionar CSS – arquivo separado, externo
A melhor maneira! Simplesmente separe seu código de CSS do HTML
Uma boa prática pode ser criar um arquivo chamado styles.css com todas as regras e importar ele no HTML, assim:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body>
<a href="#">Clique aqui!</a>
</body>
</html>Para melhorar mais ainda: você pode colocar ele numa pasta específica de estilo, com o nome css
É uma boa convenção, assim você pode deixar os arquivos de estilo nessa página e os de imagem numa pasta img por exemplo
Vá além: caso seu projeto seja muito grande, não se limite a um arquivo de CSS
Quebre eles em módulos, por exemplo:
- styles.css: estilos gerais do projeto;
- products.css: estilos da página de produto;
- catalog.css: estilos da página de catálogo;
E assim você pode seguir ampliando seu projeto e deixando ele bem fácil de receber manutenção, aplicando essa simples estrutura base de pastas e separação de arquivos 🙂
Conclusão
Você deve optar por utilizar CSS de forma externa, ou seja, um arquivo para o CSS e outro para o HTML
Tente ao máximo evitar utilizar CSS inline e também no head (interno)
Pois são má práticas e podem influenciar várias coisas como: manutenção do código, performance e tempo para revisar o código
E por hoje é isso, até o próximo post!
Confira também nosso curso de HTML e CSS gratuito no YouTube clicando aqui! Onde criamos um site do 0 até o resposivo
