7 erros de CSS para evitar como iniciante
Trabalhar com Cascading Style Sheets (CSS) pode ser difícil para iniciantes. Usando CSS, você pode estruturar, atualizar e manter a aparência do seu aplicativo. Mas a linguagem requer habilidades para manipular páginas HTML para obter o layout desejado.
Aqui estão alguns erros a serem evitados ao trabalhar com CSS. Eles economizarão seu tempo e facilitarão seu processo de desenvolvimento.
1. Usando px para tamanhos de fonte
A unidade “px” representa pixels. Você pode usá-lo para expressar vários comprimentos em uma página da Web, desde a largura e a altura de um elemento até o tamanho da fonte.
No entanto, o px bloqueia seu design em um tamanho fixo para todas as telas. Uma imagem em px pode ocupar toda a largura de uma tela e apenas uma pequena proporção de outra. Se você deseja um elemento mais proporcional, use medidas relativas, como rem ou porcentagens (%).
A melhor medida relativa a ser usada é rem. Esta unidade refere-se ao tamanho da fonte do elemento raiz que um leitor pode frequentemente definir nas configurações do navegador. Você pode ver o impacto de px e rem em um elemento no exemplo a seguir:
<!DOCTYPE html>
<HTML>
<head></head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
Você pode estilizar os tamanhos de fonte neste documento usando unidades px com o seguinte CSS:
h1 {
font-size: 50px;
}
h2 {
font-size: 30px;
}
p {
font-size: 15px;
}
A página resultante parece aceitável quando você a visualiza em uma tela grande:
Mas não parece apresentável em uma tela menor, como em um telefone:
Em seguida, aplique rem no mesmo conteúdo. Especifique um tamanho de fonte base no elemento html e dimensione outros elementos usando rems, conforme ilustrado abaixo:
html {
font-size: 16px;
}
h1 {
font-size: 3rem;
}
h2 {
font-size: 2rem;
}
p {
font-size: 1rem;
}
Observe a diferença entre as telas grandes e pequenas. Com rem, o conteúdo é dimensionado melhor independentemente do tamanho da tela. Os elementos nunca excederão o tamanho da tela definido. É por isso que é melhor usar comprimentos relativos em vez de pixels.
Em uma tela de desktop:
Em uma tela pequena, o texto em unidades rem ainda é legível:
2. Colocando todos os seus estilos em um arquivo
Usar um arquivo CSS para um grande projeto pode criar uma confusão. Você terá um arquivo com longas linhas de código que serão confusas ao atualizar. Tente usar arquivos diferentes para folhas de estilo CSS para diferentes componentes.
Por exemplo, você pode ter arquivos diferentes para navegação, cabeçalho e rodapé. E outro para seções no corpo. Separar seus arquivos CSS ajuda a estruturar seu aplicativo e incentiva a usabilidade do código.
3. Usando CSS Inline Inapropriadamente
No CSS vanilla, você pode escrever estilos nas páginas HTML, assim como em estruturas CSS como Bootstrap e TailwindCSS. O CSS embutido permite que você aplique um estilo único a um elemento HTML. Ele usa o atributo style do elemento HTML.
O código a seguir é um exemplo de CSS embutido.
<h2 style="color:green;">This is a Green Heading</h2>
<p style="color:red;">This is a red paragraph.</p>
O texto aparecerá assim:
No entanto, HTML com CSS embutido só pode ser confuso. Como não há outro local para CSS, todo o CSS existe no mesmo arquivo que o HTML. Vai parecer lotado. A edição de tal arquivo é difícil, especialmente se não for seu código.
Além disso, com CSS embutido, você precisa escrever código para cada elemento. Isso aumenta a repetição e reduz a reutilização de código. Sempre use uma combinação de folhas de estilo externas e CSS embutido para estilizar suas páginas da web.
4. Uso excessivo! importante
Em CSS, a regra !important adiciona mais importância a uma propriedade/valor. Ele substitui outras regras de estilo para essa propriedade nesse elemento.
Você deve ter apenas alguns ! regras importantes em seu código. Use-o somente quando necessário. Não faz sentido escrever código e depois substituí-lo. Seu código parecerá confuso e causará problemas quando executado em alguns dispositivos.
<!DOCTYPE html>
<html>
<head></head>
<body>
<p> I am orange </p>
<p class="my-class"> I am green </p>
<p id="my-id"> I am blue. </p>
</body>
</html>
CSS:
#my-id {
background-color: blue;
}
.my-class {
background-color: green;
}
p {
background-color: orange! important;
}
O resultado é assim:
5. Não seguir as convenções de nomenclatura
CSS tem convenções de nomenclatura que orientam os desenvolvedores sobre como escrever código padrão. Isso é essencial se você acabar depurando o arquivo CSS em uma data futura.
Um desses padrões inclui o uso de hifens para separar palavras agrupadas. Outra é nomear um seletor de acordo com o que ele faz. Portanto, quem olhar para ele não terá que adivinhar. Também facilita a leitura, manutenção e compartilhamento do código. Por exemplo:
Em vez disso:
.image1 { margin-left: 3%; }
Escreva assim:
.boy-image { margin-left: 3%; }
Ao olhar para a folha de estilo, você saberá exatamente para qual imagem o código é. O guia de estilo HTML/CSS do Google lista muitas outras convenções que todo desenvolvedor deve conhecer.
6. Deixando o código sem comentários
Escrever comentários é a habilidade mais subestimada na programação. Muitas pessoas se esquecem de escrever comentários para explicar seu código. Mas economiza tempo. Os comentários são essenciais para a leitura e manutenção do código.
Como o CSS é estruturado livremente e qualquer um pode desenvolver suas próprias convenções, os comentários são vitais. Usar comentários bem estruturados para explicar sua folha de estilo é uma boa prática. Você pode escrever comentários explicando as seções do código e o que elas fazem.
/* video elements need space to breathe */
.video {
margin-top: 2em;
}
/* styling the hero section */
.salutation {
margin-top: 1em;
}
7. Falha ao projetar antecipadamente
Muitas pessoas fazem isso, mas é um erro grave começar a codificar sem um plano. O CSS determina a aparência da estrutura do seu front-end. O design diz muito sobre suas habilidades de programação.
Um design para seu site esclarece sua visão e os recursos necessários para chegar lá. Tenha uma imagem mental do seu projeto. Em seguida, desenhe-o no papel ou use um kit de ferramentas de design como o Canva para visualizar o que deseja.
Quando você tiver uma visão completa do projeto, reúna todos os seus recursos e comece a codificar. Isso economizará tempo e redundância.
Por que você deve considerar essas recomendações
Se você estiver desenvolvendo aplicativos na web, usará CSS. Trabalhar bem com CSS requer prática e seguir as convenções padrão. As convenções não apenas tornam seu código legível, mas também de fácil manutenção.
Escrever código padronizado economizará tempo e esforço. O tempo que você gastaria formatando o front-end, você pode gastar em recursos mais complexos. Ele também garante que você possa reutilizar o código e compartilhá-lo com outras pessoas. Escreva um código melhor seguindo as convenções definidas e torne-se um desenvolvedor melhor.
Deixe um comentário