Tyhmimmät CSS-virheeni

Julkaissut Platon

seuraajia: 0

Me kaikki teemme virheitä koodissamme. Se tapahtuu! Tiedän, että jos pöydälläni roikkuisi yksi noista "päiviä viimeisestä virheestä" -kylteistä, iso hanhenmuna leijuisi yläpuolellani koko ajan. Sen ei myöskään tarvitse olla suuria virheitä. Kömpelöni itseni on tehnyt pieniä virheitä repoihin kirjoitusvirheistä aina valmiisiin npm-moduulihakemistoihin.

Ohooooops.

Se on yksi niistä asioista, joista todella pidän CSS:ssä: se on anteeksiantavaa. Jos se ei ymmärrä kirjoitusvirhettä, se jatkaa katselua sarjasta etsiessään ottelua. Mikään niistä asioista, joissa yksi väärä hahmo rikkoo sivuston eikä ota vankeja. Mutta on silti noloa, kun CSS-virheitä tulee esiin!

Kuten tämä, huomaan tekeväni paljon useammin kuin haluaisin myöntää:

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

Tai kun yritän asettaa gradientin ilman a background omaisuus:

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

Vihaan kuinka lähellä X ja C ovat näppäimistöllä, koska en voi laskea kuinka monta kertaa räjähdän läpi jotain ja erehdyn px varten pc yksikköä.

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

Toinen CSS-virhe, jonka huomaan usein, on virhe, jonka tiedän monien muiden tekevän, koska huomaan sen liian usein blogiteksteissä, joissa on koodikatkelmia:

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

Oletko koskaan unohtanut käyttää var() CSS-muuttujan ympärillä? Olen varmasti.

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

CSS-muuttujista puheen ollen, niiden nimeäminen on vaikeaa (kuten kaikki muukin) ja käytän usein jotain väärää versiota nimeämästäni muuttujasta!

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

/* Much later on... */

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

Kyllä, olen todellakin kopioinut pätkän CSS:stä ennenkin vain saadakseni hienot lainaukset estää sen toimimisen:

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

Ja kyllä, olen viettänyt aivan liian kauan selvittääkseni, että nuo lainaukset olivat syyllisiä.

Tuota viimeistä katsoessani tulee mieleen, että joskus unohdan asettaa sen content omaisuutta, kun työskentelen ::before or ::after. Tämä muistuttaa minua siitä, kuinka olen unohtanut asettaa elementin position ennen kuin yrität korvata sitä tai muuttaa sitä z-index. Vakavasti, näitä tapahtuu!

Virheistä on vaikea puhua

Oletko koskaan lukenut blogikirjoitusta, jossa on jaettu jotain hämmästyttävää temppua, ja tuntenut jonkinlaisen huijarisyndrooman? Luulen, että tämä johtuu suurelta osin siitä, että blogiviestit usein peittävät todellisen työn – ja epäonnistumiset – jotka menevät uskomattomiin temppuihin. Tällaisia viestejä elämisen vuoksi lukevana voin kertoa, että monet, ellei valtaosa, käyvät läpi monia muokkauskierroksia, joissa mahdollisesti kiusalliset virheet karsitaan pois ja tasoitetaan.

Jopa näiden naurettavan mahtavien artikkelien täytyy epäonnistua, ennen kuin ne saavat ne kaikki ooooos ja ahhhhs.

Sama pätee kaikkiin sovelluksiin, verkkosivustoihin, demoihin tai mihin tahansa, mitä kohtaat. Todennäköisyys, että joku niistä tuli täydelliseksi ensimmäisellä kerralla, on mitätön.

Mutta jos olen täysin rehellinen sinulle, olen usein enemmän hämmästynyt (ja kiinnostunut) siitä matka se vaatii saavuttaa jotain, syylät ja kaikki. Matka on katsaus siihen, millaista se on ajattele kuin etupään kehittäjä. Siellä tapahtuu todellista (ja arvokkainta) oppimista.

Ja kaikki tämä on vain rakentamista siihen, mitä todella haluan kysyä…