Ei! Já faz um tempo desde o meu último artigo, e senti falta de me conectar com todos vocês. Estou animado por voltar e compartilhar algumas dicas úteis para sua jornada de desenvolvimento da web!

hoje, vamos explorar cinco práticas CSS que você deve evitar . Espero que você ache essas idéias úteis! Vamos ?

1. Seletores excessivamente específicos

A gravação de seletores altamente específicos pode dificultar o gerenciamento e a depuração do seu CSS. Mantenha os seletores simples e reutilizáveis.

Evitar:

#header .nav .link.active:hover {
    color: red;
}

Melhorar:

.nav-link:hover {
    color: red;
}

use a especificidade somente quando necessário para evitar a complexidade desnecessária.

2. Sobrecarregando seletores globais

usando seletores universais ou excessivamente amplos podem afetar sem querer grandes partes do seu site.

Evitar:

* {
    margin: 0;
    padding: 0;
}

Melhorar:

html, body {
    margin: 0;
    padding: 0;
}

Reduza o uso de seletores globais para evitar efeitos colaterais inesperados.

3. Cores ou valores de codificação dura

A codificação dura dificulta as atualizações. Em vez de usar valores aleatórios em todos os lugares, use variáveis ​​para consistência.

Evitar:

.primary-btn {
    color: #3498db;
    margin: 20px;
}

Melhorar:

:root {
    --primary-color: #3498db;
    --default-margin: 20px;
}
.primary-btn {
    color: var(--primary-color);
    margin: var(--default-margin);
}

4. Unidades inconsistentes

unidades de mistura (por exemplo, px, rem, %) leva a projetos inconsistentes e questões de resposta.

Evitar:

font-size: 16px;  
margin: 1rem;  
width: 50%;

Melhorar:

font-size: 1rem;  
margin: 1rem;  
width: 50%;

use unidades consistentes como REM para fontes e % para layout.

5. Esquecendo a compatibilidade do navegador

usando novos recursos CSS sem considerar o suporte do navegador pode quebrar designs para alguns usuários.

Evitar:

div {
    aspect-ratio: 16 / 9;
}

Melhorar:

@supports (aspect-ratio: 1) {
    div {
        aspect-ratio: 16 / 9;
    }
}

Conclusão

Por Evitando essas práticas CSS comuns , podemos escrever estilos mais limpos, mais eficientes e garantir páginas da web de alto desempenho. Seguir as práticas recomendadas não apenas melhora a experiência do usuário, mas também torna nosso código mais legível e manutenção para nossa equipe. 

Espero que você tenha achado este post útil! Vejo você no próximo artigo!