CSS: Validação de código e identificação de erros comuns

A validação de código é algo importante?

Para os mais experientes, diriam que não é necessário. Existem IDEs que conseguem mostrar os erros sem precisar de um site de validação.

De qualquer modo, para os iniciantes, é uma boa prática, podendo economizar algum tempo na solução do seu problema e tornar seu código mais organizado.

A W3C possui uma ferramenta para validação de código CSS que compartilho neste link.

Segue uma lista de erros comuns em código CSS:

– Vírgula adicional, após vários seletores:

h1, h2, h3, { color: black; }
correto: h1, h2, h3 { color: black; }

– Falta de ponto e vírgula

p { text-algin:center color:#000; }
correto: p { text-algin:center; color:#000; }

– Uso de seletor incorreto (inexistente)

image{ border: 1px solid #CCC; }
correto: img{ border: 1px solid #CCC; }

– Uso de propriedade incorreta (inexistente)

h4 { font-color: blue; }
correto: h4 { color: blue; }

– Uso de valor incorreto (inexistente)

h4 { color: yellow-dark; }
correto: h4 { color: yellow; }

– Espaço em branco (propriedades/valores)

p { text -align:center; }
correto: p { text-align:center; }

p { padding: 10 px; }
correto: p { padding: 10px; }

– Falta de unidade

p { padding: 10; }
correto: p { padding: 10px; } / p { padding: 10em; } / p { padding: 10%; }

– Definindo propriedades para a identificação do atributo errado

<p id=”texto”>

.texto { color: red }
correto: #texto { color: red; }

O ponto (.) é para o atributo class e cerquilha/jogo da velha/hashtag (#) para o atributo id.

Espero que este post seja útil pra você.

Até a próxima!