A leghülyébb CSS-hibáim

Újra kiadta Platón

Követő: 0

Mindannyian követünk el hibákat a kódunkban. Megtörténik! Tudom, ha az asztalomon lógna a „Napok az utolsó tévedés óta” táblák egyike, akkor egy nagy libatej lebegne fölöttem állandóan. Nem kell, hogy nagy hibák legyenek. Ügyetlen énem apró hibákat követett el a repókban, a gépelési hibáktól egészen a teljes npm modulkönyvtárakig.

Hooooooops.

Ez az egyik dolog, amit igazán szeretek a CSS-ben: pokolian elnéző. Ha nem érti a gépelési hibát, folyamatosan felfelé néz a kaszkádban, keresve a megfelelőt. Egyik sem olyan dolog, ahol egy oda nem illő karakter feltör egy oldalt, és nem ejt foglyot. De még mindig kínos, amikor a CSS hibák felbukkannak!

Mint ez, sokkal többször találom magam, mint amennyit be szeretnék vallani:

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

Vagy amikor megpróbálok gradienst beállítani a nélkül background ingatlan:

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

Utálom, milyen közel X és a C billentyűzeten vannak, mert nem tudom megszámolni, hogy hányszor égek át valamin és tévedek px mert pc egység.

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

Egy másik olyan CSS hiba, amelyet gyakran elkapok, és tudom, hogy sokan mások is elkövetnek, mert túl gyakran veszem észre a kódrészleteket tartalmazó blogbejegyzésekben:

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

Elfelejtetted már használni var() CSS változó körül? Biztos van.

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

Ha a CSS-változókról beszélünk, nehéz elnevezni őket (mint minden más) és gyakran használok egy általam elnevezett változó hibás változatát!

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

/* Much later on... */

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

Igen, valóban lemásoltam egy részletet a CSS-ből, csak azért, hogy divatos idézetek akadályozzák a működését:

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

És igen, túl sokáig töltöttem azzal, hogy rájöjjek, ezek az idézetek voltak a tettesek.

Az utolsót nézve eszembe jut, hogy néha elfelejtem beállítani a content tulajdon, amikor dolgozom ::before or ::after. Erről jut eszembe, hogy elfelejtettem beállítani egy elemet position mielőtt megpróbálná kiegyenlíteni vagy megváltoztatni z-index. Komolyan, ezek megtörténnek!

Nehéz a hibákról beszélni

Előfordult már, hogy elolvasott egy olyan blogbejegyzést, amely elképesztő trükköt osztott meg, és érzett valamiféle imposztor szindrómát? Azt hiszem, ez nagyrészt azért van, mert a blogbejegyzések gyakran elfedik a valódi munkát – és a kudarcokat –, amelyek elképesztő trükkökbe mennek bele. Mint aki megélhetésért olvassa az efféle posztokat, elmondhatom, hogy sokan, ha nem is a túlnyomó többség, sok olyan szerkesztési körön mennek keresztül, ahol az esetlegesen kínos hibákat kigyomlálják és elsimítják.

Még ezeknek a nevetségesen félelmetes cikkeknek is meg kell bukniuk, mielőtt mindezt megkapnák óóóó és a ahhhhs.

Ugyanez igaz minden alkalmazásra, webhelyre, demóra vagy bármire, amivel véletlenül találkozik. Annak az esélye, hogy bármelyikük tökéletesre sikerült az első alkalommal, szinte semmi.

De ha teljesen őszinte vagyok veled, akkor gyakran jobban lenyűgöz (és érdekel) a utazás kell valamit elérni, szemölcsök és minden. Az utazás egy bepillantást nyújt abba, hogy milyen gondolkozz úgy, mint egy front-end fejlesztő. Itt történik az igazi (és a legértékesebb) tanulás.

És mindez csak arra épül, amit igazán kérdezni szeretnék…