mis errores más tontos de CSS | consejos CSS

Todos cometemos errores en nuestro código. ¡Eso pasa! Sé que si tuviera uno de esos carteles de Días desde el último error colgado sobre mi escritorio, un gran huevo de gallina estaría flotando sobre mí todo el tiempo. Tampoco debería haber grandes errores. Mi torpe yo cometió pequeños errores en los repositorios que van desde errores tipográficos hasta directorios completos de módulos npm.

Ups.

Esta es una de las cosas que realmente amo de CSS: es indulgente. Si no entiende un error tipográfico, continúa buscando en la cascada una coincidencia. Nada de esto donde un personaje desplazado rompe un sitio y no toma prisioneros. ¡Pero sigue siendo vergonzoso cuando aparecen errores de CSS!

Como este, me encuentro haciendo muchas más veces de las que me gustaría admitir:

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

O cuando trato de establecer un gradiente sin background propiedad:

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

odio la cercanía X y contra están en un teclado porque no puedo contar la cantidad de veces que he pasado por algo y me equivoqué px para pc unidades.

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

Otro error de CSS que detecto de vez en cuando es uno que cometen muchas otras personas porque lo veo con demasiada frecuencia en 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() alrededor de una variable CSS? Claro que tengo.

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

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

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

/* Much later on... */

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

Sí, de hecho copié un fragmento de CSS antes de que las citas elegantes lo hicieran funcionar:

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

Y, sí, pasé demasiado tiempo averiguando que esas citas eran las culpables.

Mirar esto último me recuerda que a veces me olvido de configurar el content propiedad cuando trabajo con ::before Dónde ::after. Lo que me recuerda cómo olvidé establecer un elemento position antes de intentar compensarlo o cambiar su z-index. ¡En serio, estas cosas pasan!

Índice
  1. Es difícil hablar de errores
  2. ¿Cuáles son tus errores CSS más tontos?

Es difícil hablar de errores

¿Alguna vez terminaste de leer una publicación de blog compartiendo un consejo increíble y sentiste algún tipo de síndrome de impostor? Creo que eso se debe en gran parte a que las publicaciones de blog a menudo oscurecen el trabajo real, y los fracasos, que se convierten en consejos sorprendentes. Como alguien que lee artículos como este para ganarse la vida, puedo decirle que muchos, si no la gran mayoría, pasan por muchas rondas de edición donde se eliminan y suavizan los errores potencialmente vergonzosos.

Incluso esos elementos ridículamente asombrosos tienen que fallar antes de que obtengas todos esos oooooo y ahhhhhs.

Lo mismo ocurre con cualquier aplicación, sitio web, demostración o cualquier otra cosa que encuentre. Las probabilidades de que cualquiera de ellos sea perfecto la primera vez son casi nulas.

Pero si te soy completamente honesto, a menudo estoy más asombrado (e interesado) por la viaje se necesita para lograr algo, verrugas y todo. El viaje es un vistazo a lo que es pensar como un desarrollador front-end. Aquí es donde ocurre el verdadero (y más valioso) aprendizaje.

Y todo eso construye lo que realmente quiero preguntar…

¿Cuáles son tus errores CSS más tontos?

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

Si quieres conocer otros artículos parecidos a mis errores más tontos de CSS | consejos CSS puedes visitar la categoría Estilo.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir

Esta página web utiliza cookies para analizar de forma anónima y estadística el uso que haces de la web, mejorar los contenidos y tu experiencia de navegación. Para más información accede a la Política de Cookies . Ver mas