Mina dummaste CSS-misstag

Återutgiven av Platon

anhängare: 0

Vi gör alla fel i vår kod. Det händer! Jag vet att om jag hade en av dessa "Days Since Last Mistake"-skyltar hängande över mitt skrivbord, skulle ett stort gammalt gåsägg sväva över mig hela tiden. Det behöver inte vara stora misstag heller. Mitt klumpiga jag har begått små fel till repor, allt från stavfel hela vägen till kompletta npm-modulkataloger.

Whoooooops.

Det är en av de saker jag verkligen älskar med CSS: det är förlåtande som fan. Om den inte förstår ett stavfel, fortsätter den att leta upp kaskaden på jakt efter en matchning. Inget av det där där en malplacerad karaktär bryter sönder en plats och inte tar några fångar. Men det är fortfarande pinsamt när CSS-fel dyker upp!

Som den här kommer jag på mig själv göra mycket fler gånger än jag skulle vilja erkänna:

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

Eller när jag försöker ställa in en gradient utan a background fast egendom:

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

Jag hatar hur nära X och C är på ett tangentbord eftersom jag inte kan räkna hur många gånger jag flammar igenom något och missar px för pc enheter.

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

Ett annat CSS-misstag jag upptäcker då och då är ett jag vet att många andra gör eftersom jag ser det för ofta i blogginlägg med kodavsnitt:

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

Har du någonsin glömt att använda var() kring en CSS-variabel? Det har jag säkert.

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

På tal om CSS-variabler, det är svårt att namnge dem (som allt annat) och jag använder ofta någon felaktig version av en variabel som jag namngav!

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

/* Much later on... */

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

Ja, jag har verkligen kopierat ett utdrag av CSS tidigare bara för att få snygga citat i vägen för att få det att fungera:

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

Och ja, jag har ägnat alldeles för lång tid åt att ta reda på att de citaten var boven.

När jag tittar på den sista påminner jag mig om att jag ibland glömmer att ställa in content egendom när jag jobbar med ::before or ::after. Vilket påminner mig om hur jag har glömt att ställa in ett element position innan du försöker kompensera det eller ändra det z-index. Seriöst, dessa saker händer!

Det är svårt att prata om misstag

Har du någonsin läst färdigt ett blogginlägg som delar med dig av något fantastiskt trick och känt något slags Imposter-syndrom? Jag tror att det till stor del beror på att blogginlägg ofta maskerar det verkliga arbetet – och misslyckanden – som går till fantastiska knep. Som någon som läser sådana inlägg för sitt uppehälle kan jag berätta att många, om inte de allra flesta, går igenom många redigeringsrundor där potentiellt pinsamma misstag såras bort och slätas ut.

Även dessa löjligt fantastiska artiklar måste misslyckas innan de får alla dessa åååh och ahhhhhs.

Detsamma gäller för alla appar, webbplatser, demoer eller vad du nu råkar stöta på. Chansen att någon av dem kom ut perfekt första gången är nästan ingenting.

Men om jag ska vara helt ärlig mot dig är jag ofta mer förvånad (och intresserad) av resa det krävs för att åstadkomma något, vårtor och allt. Resan är en inblick i hur det är att tänk som en frontend-utvecklare. Det är där verklig (och mest värdefull) lärande sker.

Och allt detta bygger bara upp till det jag verkligen vill fråga...