CSS Desenvolvimento HTML

A maneira correta de adicionar CSS a uma página web

14 de outubro de 2019

A maneira correta de adicionar CSS a uma página web

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

adicionando css corretamente capa

Como adicionar CSS a um projeto?

Hoje temos basicamente três maneiras de adicionar CSS:

  1. Arquivo externo (maneira correta);
  2. CSS no head – interno (incorreta menos grave);
  3. 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 😀

 

0

Programador apaixonado pelo mundo das tecnologias, sempre buscando em aprender e se aprofundar em linguagens, frameworks e o que mais for necessário para executar um bom trabalho. Agora tem uma nova missão que é de passar seu conhecimento adiante para formar novos programadores e especializar mais os que já são.

Deixe um comentário

avatar
  Subscribe  
Notify of