Cele mai stupide greșeli CSS ale mele

Republicat de Platon

Urmaritori: 0

Cu toții facem greșeli în codul nostru. S-a întâmplat! Știu că dacă aș avea unul dintre acele semne „Zilele de la ultima greșeală” atârnat deasupra biroului meu, un ou mare de gâscă ar fi plutind deasupra mea tot timpul. Nici nu trebuie să fie greșeli mari. Sinele meu stângaci a comis mici erori în repoziții, de la greșeli de tipar până la completarea directoarelor modulelor npm.

Whoooooops.

Acesta este unul dintre lucrurile pe care le iubesc cu adevărat la CSS: este iertator ca naiba. Dacă nu înțelege o greșeală de tipar, continuă să caute în cascadă în căutarea unei potriviri. Nimic din acele lucruri în care un personaj nepotrivit sparge un site și nu face prizonieri. Dar este încă jenant când apar greșeli CSS!

Ca acesta, mă trezesc făcând de mai multe ori decât aș vrea să recunosc:

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

Sau când încerc să setez un gradient fără a background proprietate:

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

Urăsc cât de aproape X și C sunt pe o tastatură pentru că nu pot număra de câte ori trec prin ceva și greșesc px pentru pc de unități.

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

O altă greșeală CSS pe care o prind din când în când este una pe care știu că o fac mulți alți oameni, deoarece o observ prea des în postările de blog cu fragmente de cod:

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

Ați uitat vreodată să utilizați var() în jurul unei variabile CSS? Sigur am.

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

Vorbind despre variabile CSS, numirea lor este dificilă (ca orice altceva) și folosesc adesea o versiune incorectă a unei variabile pe care am numit-o!

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

/* Much later on... */

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

Da, într-adevăr, am copiat un fragment de CSS înainte doar pentru ca ghilimele fanteziste să împiedice să funcționeze:

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

Și, da, am petrecut mult prea mult timp înțelegând că acele citate sunt vinovate.

Privind la ultima, îmi amintește că uneori uit să setez content proprietate când lucrez cu ::before or ::after. Ceea ce îmi amintește de cum am uitat să setez elementele unui element position înainte de a încerca să-l compensezi sau să-l schimbi z-index. Serios, lucrurile astea se întâmplă!

E greu să vorbești despre greșeli

Ați terminat vreodată de citit o postare pe blog care împărtășește un truc uimitor și ați simțit un fel de sindrom de impostor? Cred că asta se datorează în mare parte faptului că postările de pe blog maschează adesea munca reală - și eșecurile - care duc la trucuri uimitoare. Ca cineva care citește astfel de postări, vă pot spune că mulți, dacă nu marea majoritate, trec prin multe runde de editare în care greșelile potențial jenante sunt eliminate și netezite.

Chiar și acele articole ridicol de minunate trebuie să eșueze înainte de a le obține pe toate ooooos și ahhhhs.

Același lucru este valabil pentru orice aplicație, site web, demonstrație sau orice altceva întâlniți. Șansele ca oricare dintre ele să iasă perfect prima dată sunt aproape deloc.

Dar dacă sunt total sincer cu tine, sunt adesea mai uimit (și interesat) de călătorie este nevoie pentru a realiza ceva, negi și tot. Călătoria este o privire asupra a ceea ce înseamnă Gândește-te ca un dezvoltator front-end. Acolo se întâmplă învățarea reală (și cea mai valoroasă).

Și toate acestea se construiesc doar la ceea ce vreau cu adevărat să întreb...