Mine dummeste CSS-feil

Publisert av Platon

Følgere: 0

Vi gjør alle feil i koden vår. Det skjer! Jeg vet at hvis jeg hadde et av disse «Days Since Last Mistake»-skiltene hengende over skrivebordet mitt, ville et stort gåseegg svevet over meg hele tiden. Det trenger ikke være store feil heller. Mitt klønete jeg har begått små feil til repos, alt fra skrivefeil hele veien til komplette npm-modulkataloger.

Whoooooops.

Det er en av tingene jeg virkelig elsker med CSS: det er for pokker tilgivende. Hvis den ikke forstår en skrivefeil, fortsetter den å lete opp kaskaden på jakt etter en kamp. Ikke noe av det der en malplassert karakter bryter et nettsted og tar ingen fanger. Men det er fortsatt pinlig når CSS-feil dukker opp!

Som denne finner jeg meg selv i å lage flere ganger enn jeg vil innrømme:

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

Eller når jeg prøver å sette en gradient uten a background eiendom:

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

Jeg hater hvor nærme X og C er på et tastatur fordi jeg ikke kan telle hvor mange ganger jeg brenner gjennom noe og feiler px forum pc enheter.

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

En annen CSS-feil jeg fanger av og til, er en jeg vet mange andre gjør fordi jeg oppdager den for ofte i blogginnlegg med kodebiter:

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

Har du noen gang glemt å bruke var() rundt en CSS-variabel? Det har jeg sikkert.

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

Når vi snakker om CSS-variabler, er det vanskelig å navngi dem (som alt annet) og jeg bruker ofte en feil versjon av en variabel som jeg har navngitt!

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

/* Much later on... */

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

Ja, jeg har faktisk kopiert et utdrag av CSS før bare for å få fancy sitater i veien for å få det til å fungere:

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

Og ja, jeg har brukt altfor lang tid på å finne ut at de sitatene var synderen.

Når jeg ser på den siste, minner jeg meg på at jeg noen ganger glemmer å stille inn content eiendom når jeg jobber med ::before or ::after. Som minner meg om hvordan jeg har glemt å angi et element position før du prøver å forskyve den eller endre den z-index. Seriøst, disse tingene skjer!

Det er vanskelig å snakke om feil

Har du noen gang lest ferdig et blogginnlegg som har delt et fantastisk triks og følt en slags Imposter-syndrom? Jeg tror det i stor grad er fordi blogginnlegg ofte maskerer det virkelige arbeidet - og feilene - som går inn i fantastiske triks. Som en som leser slike innlegg for å leve, kan jeg fortelle deg at mange, om ikke de aller fleste, går gjennom mange redigeringsrunder der potensielt pinlige feil lukes ut og jevnes over.

Selv de latterlig fantastiske artiklene må mislykkes før de får alle disse åååå og ahhhhhs.

Det samme gjelder alle apper, nettsider, demoer eller hva du måtte komme over. Sjansene for at noen av dem kom ut perfekt første gang er nesten ingenting.

Men hvis jeg skal være helt ærlig med deg, er jeg ofte mer overrasket (og interessert) i reise det skal til for å få til noe, vorter og alt. Reisen er et glimt av hvordan det er å tenke som en front-end-utvikler. Det er der virkelig (og mest verdifull) læring skjer.

Og alt dette bygger bare opp til det jeg virkelig ønsker å spørre om...