Mis errores CSS más estúpidos trucos CSS

Todos cometemos errores en nuestro código. Sucede! Sé que si tuviera uno de esos letreros de "Días del último error" colgado sobre mi escritorio, un gran huevo de gallina estaría encima de mí todo el tiempo. No es así, debe haber grandes errores, mi torpeza ha cometido pequeños errores en el repositorio, que van desde errores tipográficos hasta completar directorios en módulos npm.

Ooooooo.

Esa es una de las cosas que realmente me gustan de CSS: maldita sea, es indulgente. Si no entiende el error tipográfico, continúa buscando en la cascada en busca de una coincidencia. Ninguna de estas cosas donde un símbolo inapropiado rompe un sitio y no toma cautivos. ¡Pero sigue siendo incómodo cuando aparecen errores de CSS!

Así, encuentro que viajo más veces de las que me gustaría admitir:

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

O cuando trato de establecer un degradado sin un background Propiedad:

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

Odio lo cerca X y °C están en el teclado porque no puedo contar cuántas veces transfiero algo y cometo un error px por pc unidades.

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

Otro error de CSS que detecto de vez en cuando es el que sé que mucha gente tiene porque lo noto con demasiada frecuencia en las publicaciones de blog con fragmentos de código:

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

¿Alguna vez has olvidado usar var() sobre la variable CSS? Estoy seguro.

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

Hablando de variables CSS, nombrarlas es difícil (como todo lo demás) y ¡a menudo uso alguna versión incorrecta de una variable que nombré!

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

/* Much later on... */

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

Sí, realmente he copiado un fragmento de CSS antes, solo para tener citas fantásticas para evitar que funcione:

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

Y sí, pasé demasiado tiempo dándome cuenta de que estas citas eran las culpables.

Mirar esto último me recuerda que a veces me olvido de ajustar content propiedad cuando trabajo con ::before o ::afterLo que me recuerda cómo olvidé configurar un elemento position antes de intentar compensarlo o cambiarlo z-index¡En serio, estas cosas pasan!

Es difícil hablar de errores.

¿Alguna vez has leído una publicación de blog que comparte algunos trucos increíbles y has sentido algún tipo de síndrome del impostor? Creo que esto se debe en gran parte a que las publicaciones de blog a menudo enmascaran el trabajo real, y los fracasos, que se convierten en trucos increíbles. Como alguien que lee este tipo de publicaciones de por vida, puedo decirle que muchas, si no la gran mayoría, pasan por muchas rondas de edición, donde se eliminan y suavizan los errores potencialmente inconvenientes.

Incluso estos artículos ridículamente geniales tienen que fallar antes de que todos los obtengan. ooooo y aaaaaa.

Lo mismo ocurre con cualquier aplicación, sitio web, demostración o lo que sea que encuentre. Las posibilidades de que alguno de ellos resulte perfecto por primera vez son casi nulas.

Pero si soy completamente honesto contigo, a menudo estoy más asombrado (e interesado) que viajar es necesario para lograr algo, verrugas y todo lo demás. El viaje es una mirada a lo que es pensar como un desarrollador front-end. Ahí es donde ocurre el aprendizaje real (y más valioso).

Y todo se basa en lo que realmente quiero preguntar...

¿Cuáles son tus errores de CSS más estúpidos?

¡Vamos, todos sabemos que hiciste algunos! ¡Aprendamos de ellos!