Meus erros de CSS mais idiotas

Republicado por Platão

seguidores: 0

Todos nós cometemos erros em nosso código. Acontece! Eu sei que se eu tivesse uma daquelas placas de “Dias desde o último erro” pendurada na minha mesa, um grande ovo de ganso estaria pairando sobre mim o tempo todo. Também não precisa ser grandes erros. Meu eu desajeitado cometeu pequenos erros em repositórios, desde erros de digitação até diretórios completos do módulo npm.

Ops.

Essa é uma das coisas que eu realmente amo no CSS: é perdoar pra caramba. Se não entender um erro de digitação, ele continua procurando a cascata em busca de uma correspondência. Nenhuma dessas coisas em que um personagem fora do lugar quebra um site e não faz prisioneiros. Mas ainda é embaraçoso quando aparecem erros de CSS!

Como este, eu me vejo fazendo muito mais vezes do que gostaria de admitir:

.element {
  display: flexbox; /* 🤦‍♂️ */
}

Ou quando tento definir um gradiente sem um background propriedade:

.gradient {
  linear-gradient(45deg, rgb(50% 100% 90%), rgb(62% 85% 93%));
}

Eu odeio o quão perto X e C estão em um teclado porque não posso contar quantas vezes estou queimando algo e erro px para pc unidades.

.element {
  font-size: 16pc; /* I meant pixels! */
}

Outro erro de CSS que eu pego de vez em quando é um que sei que muitas outras pessoas cometem porque eu o vejo com muita frequência em postagens de blog com trechos de código:

// This is not a CSS comment.
.element {
  /* This is a CSS comment. */
}

Você já se esqueceu de usar var() em torno de uma variável CSS? Eu tenho certeza.

.element {
  color: --primary-color;
}

Falando em variáveis CSS, nomeá-las é difícil (como todo o resto) e muitas vezes uso alguma versão incorreta de uma variável que nomeei!

:root {
  --color-primary: #FF5722;
  --color-secondary: #3E2723;
}

/* Much later on... */

.element {
  color: var(--primary-color); /* 🙃 */
}

Sim, eu realmente copiei um trecho de CSS antes apenas para ter citações extravagantes no caminho de fazê-lo funcionar:

.element::before {
  content: “”; /* Should be "" */
}

E, sim, passei muito tempo descobrindo que essas citações eram as culpadas.

Olhar para esse último me lembra que às vezes esqueço de definir o content propriedade quando estou trabalhando com ::before or ::after. O que me lembra de como eu esqueci de definir um elemento position antes de tentar compensá-lo ou alterar sua z-index. Sério, essas coisas acontecem!

É difícil falar sobre erros

Você já terminou de ler algum post de blog compartilhando algum truque incrível e sentiu algum tipo de Síndrome do Impostor? Eu acho que é em grande parte porque as postagens do blog geralmente mascaram o trabalho real - e as falhas - que se transformam em truques incríveis. Como alguém que lê posts como esse para ganhar a vida, posso dizer que muitos, se não a grande maioria, passam por muitas rodadas de edição em que erros potencialmente embaraçosos são eliminados e suavizados.

Mesmo aqueles artigos ridiculamente incríveis têm que falhar antes de obter todos aqueles ooooos e ahhhhh.

O mesmo vale para qualquer aplicativo, site, demonstração ou qualquer outra coisa que você encontrar. As chances de qualquer um deles sair perfeito na primeira vez são quase nulas.

Mas se estou sendo totalmente honesto com você, muitas vezes fico mais surpreso (e interessado) no viagem é preciso para realizar alguma coisa, com verrugas e tudo. A jornada é um vislumbre de como é pense como um desenvolvedor front-end. É aí que o aprendizado real (e mais valioso) acontece.

E tudo isso é apenas construir o que eu realmente quero perguntar…