Mijn domste CSS-fouten

Heruitgegeven door Plato

volgers: 0

We maken allemaal fouten in onze code. Het gebeurt! Ik weet dat als ik een van die 'Days Since Last Mistake'-borden boven mijn bureau had hangen, er de hele tijd een groot ganzenei boven me zou zweven. Het hoeven ook geen grote fouten te zijn. Mijn onhandige zelf heeft kleine fouten gemaakt in repo's, variërend van typefouten tot complete npm-modulemappen.

Whoooooops.

Dat is een van de dingen die ik zo leuk vind aan CSS: het is vergevingsgezind. Als het een typfout niet begrijpt, blijft het de cascade opzoeken op zoek naar een match. Geen van dat soort dingen waarbij een misplaatst personage een site breekt en geen gevangenen maakt. Maar het is nog steeds beschamend als er CSS-fouten opduiken!

Zoals deze merk ik dat ik veel vaker maak dan ik zou willen toegeven:

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

Of wanneer ik probeer een verloop in te stellen zonder a background eigendom:

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

Ik haat het hoe dichtbij X en C zijn op een toetsenbord omdat ik niet kan tellen hoe vaak ik door iets heen schiet en fouten maak px For pc units.

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

Een andere CSS-fout die ik af en toe betrap, is er een waarvan ik weet dat veel andere mensen ze maken, omdat ik deze te vaak zie in blogposts met codefragmenten:

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

Ben je ooit vergeten te gebruiken? var() rond een CSS-variabele? Dat heb ik zeker.

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

Over CSS-variabelen gesproken, het benoemen ervan is moeilijk (zoals al het andere) en ik gebruik vaak een onjuiste versie van een variabele die ik heb genoemd!

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

/* Much later on... */

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

Ja, ik heb inderdaad eerder een CSS-fragment gekopieerd om mooie aanhalingstekens te laten werken om het te laten werken:

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

En ja, ik heb er veel te lang over gedaan om erachter te komen dat die citaten de boosdoener waren.

Als ik naar die laatste kijk, herinner ik me eraan dat ik soms vergeet om de content eigendom als ik werk met ::before or ::after. Wat me doet denken aan hoe ik vergeten ben een element in te stellen position voordat u het probeert te compenseren of de z-index. Serieus, deze dingen gebeuren!

Het is moeilijk om over fouten te praten

Ben je ooit klaar met het lezen van een blogpost waarin je een geweldige truc deelde en een soort van oplichtersyndroom voelde? Ik denk dat dat grotendeels komt omdat blogposts vaak het echte werk maskeren - en mislukkingen - die geweldige trucs opleveren. Als iemand die dit soort berichten leest voor de kost, kan ik je vertellen dat velen, zo niet de overgrote meerderheid, vele bewerkingsrondes doorlopen waarbij potentieel gênante fouten worden verwijderd en gladgestreken.

Zelfs die belachelijk geweldige artikelen moeten falen voordat ze al die artikelen krijgen ooooooo en ahhhhs.

Hetzelfde geldt voor elke app, website, demo of wat je ook tegenkomt. De kans dat een van hen er de eerste keer perfect uitkwam, is zo goed als niets.

Maar als ik helemaal eerlijk tegen je ben, ben ik vaak meer verbaasd (en geïnteresseerd) in de het duurt om iets te bereiken, wratten en zo. De reis is een glimp van hoe het is om denk als een front-end ontwikkelaar. Dat is waar het echte (en meest waardevolle) leren plaatsvindt.

En dit alles bouwt zich alleen maar op naar wat ik echt wil vragen...