Moje najbolj neumne napake CSS

Ponovno objavil Platon

Spremljevalci: 0

Vsi delamo napake v naši kodi. Zgodi se! Vem, če bi nad mojo mizo visel eden od tistih napisov »Dnevi od zadnje napake«, bi nad mano ves čas lebdelo veliko gosje jajce. Tudi ni nujno, da gre za velike napake. Moj nerodni jaz je zagrešil majhne napake v repozitorjih, od tipkarskih napak pa vse do popolnih imenikov modulov npm.

Whooooooops.

To je ena od stvari, ki mi je zelo všeč pri CSS: je prizanesljiv. Če ne razume tipkarske napake, še naprej išče kaskado v iskanju ujemanja. Nič od tistega, ko en neumestni lik zlomi mesto in ne vzame ujetnikov. Toda še vedno je neprijetno, ko se pojavijo napake CSS!

Kot je ta, se mi zdi, da se prebijam večkrat, kot bi si želel priznati:

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

Ali ko poskušam nastaviti gradient brez background lastnost:

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

Sovražim, kako blizu X in C so na tipkovnici, ker ne morem prešteti, kolikokrat nekaj prebrskam in naredim napako px za pc enot.

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

Še ena napaka CSS, ki jo občasno opazim, je tista, za katero vem, da jo dela veliko drugih ljudi, ker jo prepogosto opazim v objavah v blogih z delčki kode:

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

Ste že kdaj pozabili uporabiti var() okrog spremenljivke CSS? Zagotovo sem.

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

Ko že govorimo o spremenljivkah CSS, jih je težko poimenovati (kot vse ostalo) in pogosto uporabljam kakšno nepravilno različico spremenljivke, ki sem jo poimenoval!

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

/* Much later on... */

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

Da, res sem že prej kopiral delček CSS-ja samo zato, da so mi modni narekovaji ovirali njegovo delovanje:

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

In ja, predolgo sem ugotavljal, da so ti citati krivec.

Pogled na to zadnjo me spomni, da včasih pozabim nastaviti content lastnino, ko delam s ::before or ::after. Kar me spomni na to, kako sem pozabil nastaviti element position preden ga poskušate izravnati ali spremeniti z-index. Resno, te stvari se dogajajo!

Težko je govoriti o napakah

Ste že kdaj prebrali objavo v spletnem dnevniku, v kateri ste delili kakšen neverjeten trik, in ste začutili nekakšen sindrom prevaranta? Mislim, da je to predvsem zato, ker objave na spletnem dnevniku pogosto prikrijejo resnično delo – in neuspehe – ki se skrivajo v neverjetnih trikih. Kot nekdo, ki se preživlja s takšnimi objavami, vam lahko povem, da mnogi, če ne kar velika večina, gredo skozi številne kroge urejanja, kjer se morebitne neprijetne napake izločijo in zgladijo.

Celo tisti smešno osupljivi članki morajo propasti, preden dobijo vse to ooooos in ahhhhhs.

Enako velja za katero koli aplikacijo, spletno mesto, predstavitev ali kar koli drugega, na kar naletite. Možnosti, da je kateri od njih prvič izpadel popoln, so skoraj nične.

Ampak če sem popolnoma iskren z vami, me pogosto bolj preseneti (in zanima) Potovanje potrebno je nekaj doseči, bradavice in vse. Potovanje je vpogled v to, kako je razmišljajte kot front-end razvijalec. Tam se zgodi pravo (in najbolj dragoceno) učenje.

In vse to je samo nadgradnja tega, kar resnično želim vprašati ...