Nous faisons tous des erreurs dans notre code. Ça arrive! Je sais que si j'avais un de ces panneaux « Jours depuis la dernière erreur » suspendu au-dessus de mon bureau, un gros œuf d'oie flotterait tout le temps au-dessus de moi. Il ne doit pas y avoir de grosses erreurs non plus. Mon moi maladroit a commis de petites erreurs dans les dépôts allant des fautes de frappe jusqu'aux répertoires complets du module npm.
Whooooops.
C'est l'une des choses que j'aime vraiment dans CSS : c'est indulgent. S'il ne comprend pas une faute de frappe, il continue de rechercher la cascade à la recherche d'une correspondance. Rien de tout cela où un personnage déplacé casse un site et ne fait aucun prisonnier. Mais c'est quand même embarrassant quand des erreurs CSS apparaissent !
Comme celui-ci, je me retrouve à faire beaucoup plus de fois que je ne voudrais l'admettre :
.element {
display: flexbox; /* 🤦♂️ */
}Ou lorsque j'essaie de définir un dégradé sans background propriété:
.gradient {
linear-gradient(45deg, rgb(50% 100% 90%), rgb(62% 85% 93%));
}Je déteste la proximité X ainsi que C sont sur un clavier parce que je ne peux pas compter le nombre de fois que je suis en train de traverser quelque chose et que je me trompe px en pc unités.
.element {
font-size: 16pc; /* I meant pixels! */
}Une autre erreur CSS que j'attrape de temps en temps est celle que beaucoup d'autres personnes commettent parce que je la repère trop souvent dans les articles de blog avec des extraits de code :
// This is not a CSS comment.
.element {
/* This is a CSS comment. */
}Avez-vous déjà oublié d'utiliser var() autour d'une variable CSS ? J'ai bien sûr.
.element {
color: --primary-color;
}En parlant de variables CSS, les nommer est difficile (comme tout le reste) et j'utilise souvent une version incorrecte d'une variable que j'ai nommée !
:root {
--color-primary: #FF5722;
--color-secondary: #3E2723;
}
/* Much later on... */
.element {
color: var(--primary-color); /* 🙃 */
}Oui, j'ai en effet copié un extrait de CSS avant que des guillemets fantaisistes ne le fassent fonctionner :
.element::before {
content: “”; /* Should be "" */
}Et, oui, j'ai passé beaucoup trop de temps à comprendre que ces citations étaient le coupable.
Regarder ce dernier me rappelle que j'oublie parfois de régler le content propriété quand je travaille avec ::before or ::after. Ce qui me rappelle comment j'ai oublié de définir un élément position avant d'essayer de le compenser ou de changer son z-index. Sérieusement, ces choses arrivent !
C'est dur de parler d'erreurs
Avez-vous déjà fini de lire un article de blog partageant une astuce incroyable et ressenti une sorte de syndrome de l'imposteur ? Je pense que c'est en grande partie parce que les articles de blog masquent souvent le vrai travail - et les échecs - qui se transforment en astuces incroyables. En tant que personne qui lit des articles comme celui-ci pour gagner sa vie, je peux vous dire que beaucoup, sinon la grande majorité, passent par de nombreuses séries d'édition où les erreurs potentiellement embarrassantes sont éliminées et lissées.
Même ces articles ridiculement géniaux doivent échouer avant d'obtenir tous ces ooooo ainsi que ahhhhh.
Il en va de même pour toute application, site Web, démo ou tout ce que vous rencontrez. Les chances que l'un d'entre eux soit parfait la première fois sont presque nulles.
Mais si je suis tout à fait honnête avec vous, je suis souvent plus étonné (et intéressé) par le chemin il faut pour accomplir quelque chose, les verrues et tout. Le voyage est un aperçu de ce que c'est que de pensez comme un développeur front-end. C'est là que l'apprentissage réel (et le plus précieux) se produit.
Et tout cela ne fait que construire ce que je veux vraiment demander…
Quelles sont vos erreurs CSS les plus stupides ?
Allez, on sait tous que tu en as fait ! Apprenons d'eux !
