I miei più stupidi errori CSS

Ripubblicato da Platone

Seguaci: 0

Tutti commettiamo errori nel nostro codice. Succede! So che se avessi uno di quei cartelli "Days Since Last Mistake" appeso sulla mia scrivania, un grosso uovo d'oca si librerebbe sempre sopra di me. Non devono nemmeno essere grandi errori. Il mio goffo io ha commesso piccoli errori nei repository che vanno dagli errori di battitura fino al completamento delle directory dei moduli npm.

Whoooooops.

Questa è una delle cose che amo davvero dei CSS: è indulgente da morire. Se non capisce un errore di battitura, continua a cercare la cascata in cerca di una corrispondenza. Nessuna di quelle cose in cui un personaggio fuori posto rompe un sito e non fa prigionieri. Ma è comunque imbarazzante quando compaiono errori CSS!

In questo caso mi ritrovo a fare molte più volte di quanto vorrei ammettere:

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

O quando provo a impostare un gradiente senza a background proprietà:

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

Odio quanto sia vicino X ed C sono su una tastiera perché non riesco a contare quante volte sto sfogliando qualcosa e sbaglio px per pc unità.

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

Un altro errore CSS che noto ogni tanto è quello che so che molte altre persone commettono perché lo vedo troppo spesso nei post del blog con snippet di codice:

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

Hai mai dimenticato di usare var() attorno a una variabile CSS? Sicuramente l'ho fatto.

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

Parlando di variabili CSS, nominarle è difficile (come tutto il resto) e spesso utilizzo una versione errata di una variabile a cui ho dato un nome!

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

/* Much later on... */

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

Sì, in effetti ho già copiato uno snippet di CSS solo per avere virgolette fantasiose che impedivano di farlo funzionare:

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

E sì, ho passato troppo tempo a capire che quelle citazioni erano il colpevole.

Guardare quest'ultimo mi ricorda che a volte mi dimentico di impostare il file content proprietà con cui lavoro ::before or ::after. Il che mi ricorda come ho dimenticato di impostare un elemento position prima di provare a compensarlo o modificarlo z-index. Sul serio, queste cose succedono!

È difficile parlare di errori

Hai mai finito di leggere qualche post sul blog in cui condividevi qualche trucco straordinario e hai sentito una sorta di sindrome dell'impostore? Penso che ciò sia in gran parte dovuto al fatto che i post dei blog spesso mascherano il vero lavoro – e i fallimenti – che si trasformano in trucchi sorprendenti. Essendo qualcuno che legge post del genere per vivere, posso dirti che molti, se non la stragrande maggioranza, passano attraverso molti cicli di editing in cui gli errori potenzialmente imbarazzanti vengono eliminati e smussati.

Anche quegli articoli ridicolmente fantastici devono fallire prima di riceverli tutti ooooos ed ahhhhh.

Lo stesso vale per qualsiasi app, sito web, demo o qualunque cosa ti capiti di imbattere. Le probabilità che qualcuno di loro sia risultato perfetto la prima volta sono quasi nulle.

Ma se devo essere totalmente onesto con te, spesso sono più stupito (e interessato) dal viaggio ci vuole per realizzare qualcosa, nel bene e nel male. Il viaggio è uno sguardo su cosa vuol dire pensa come uno sviluppatore front-end. È qui che avviene l’apprendimento reale (e più prezioso).

E tutto questo non fa altro che costruire ciò che voglio veramente chiedere...