Minu lollimad CSS-i vead

Taasavaldanud Platon

järgijaid: 0

Me kõik teeme oma koodis vigu. Juhtub! Ma tean, et kui mu laua kohal rippuks üks neist "Päevad viimasest veast" silt, hõljuks mu kohal kogu aeg suur vana hanemuna. Ka see ei pea olema suuri vigu. Minu kohmakas mina on repodes teinud väikseid vigu, alates kirjavigadest kuni täielike npm-moodulikataloogideni.

Oooooops.

See on üks asi, mida ma CSS-i juures väga armastan: see on paganama andestav. Kui see kirjaveast aru ei saa, otsib ta vastet otsides kaskaadi üles. Mitte ükski neist asjadest, kus üks kohatu tegelane rikub saidi ega võta vange. Kuid ikkagi on piinlik, kui CSS-i vead ilmuvad!

Nagu see, leian end teen palju rohkem kordi, kui tahaksin tunnistada:

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

Või kui proovin määrata gradienti ilma a background Vara:

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

Ma vihkan, kui lähedal X ja C on klaviatuuril, sest ma ei suuda kokku lugeda, mitu korda ma millestki läbi löön ja eksin px eest pc ühikut.

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

Teine CSS-i viga, mille ma nii sageli taban, on see, mida paljud teised teevad, kuna märkan seda liiga sageli koodilõiku sisaldavates ajaveebipostitustes:

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

Kas olete kunagi unustanud kasutada var() CSS-i muutuja ümber? Mul on kindlasti.

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

Rääkides CSS-i muutujatest, on nende nimetamine raske (nagu kõik muu) ja ma kasutan sageli mõne muutuja vale versiooni, mille nimetasin!

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

/* Much later on... */

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

Jah, ma olen tõepoolest varem CSS-i katkendi kopeerinud ainult selleks, et väljamõeldud tsitaadid takistaksid selle toimimist:

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

Ja jah, ma olen liiga kaua kulutanud, et aru saada, et need tsitaadid olid süüdlased.

Seda viimast vaadates meenub mulle, et mõnikord unustan selle seadistada content vara, kui ma sellega töötan ::before or ::after. Mis tuletab mulle meelde, kuidas ma olen unustanud elemendi seadistada position enne kui proovite seda kompenseerida või muuta z-index. Tõsiselt, need asjad juhtuvad!

Vigadest on raske rääkida

Kas olete kunagi lõpetanud mõne ajaveebipostituse lugemise, jagades mõnda hämmastavat trikki ja tundnud mingit petturi sündroomi? Ma arvan, et see on suuresti tingitud sellest, et ajaveebipostitused varjavad sageli tõelist tööd ja ebaõnnestumisi, mis lähevad hämmastavateks trikideks. Inimene, kes loeb selliseid postitusi oma elu nimel, võin teile öelda, et paljud, kui mitte valdav enamus, läbivad palju toimetamisringe, kus potentsiaalselt piinlikud vead välja rookitakse ja silutakse.

Isegi need naeruväärselt vinged artiklid peavad läbi kukkuma, enne kui need kõik kätte saavad ooooos ja ahhhhs.

Sama kehtib iga rakenduse, veebisaidi, demo või muu kohta, millega juhtute. Tõenäosus, et mõni neist tuli esimesel korral täiuslik, on tühine.

Aga kui ma olen teiega täiesti aus, siis olen sageli rohkem üllatunud (ja huvitatud sellest). teekond millegi saavutamiseks on vaja, tüükad ja kõik. Reis on pilguheit sellesse, mis tunne on mõtle nagu esiotsa arendaja. Seal toimub tõeline (ja kõige väärtuslikum) õppimine.

Ja see kõik on vaid loomine sellele, mida ma tõesti tahan küsida…