Meine dümmsten CSS Fehler

Wir alle machen Fehler in unserem Code. Das passiert! Ich weiß, wenn ich eines dieser Schilder „Tage seit dem letzten Fehler“ über meinem Schreibtisch hängen hätte, würde die ganze Zeit eine große fette Null über mir schweben. Es müssen ja auch keine großen Fehler sein. Mein tollpatschiges Ich hat kleine Fehler in Repos committed, die von Tippfehlern bis hin zu kompletten npm-Modulverzeichnissen reichen.

Wer ist das wohl.

Das ist eines der Dinge, die ich an CSS wirklich liebe: Es ist verdammt fehlerverzeihend. Wenn es einen Tippfehler nicht versteht, sucht es weiter in der Kaskade nach einer Übereinstimmung. Nichts von dem Kram, wo ein einziger falsch platzierter Buchstabe eine Website kaputt macht und keine Gefangenen nimmt. Aber es ist trotzdem peinlich, wenn CSS-Fehler auftauchen!

Wie dieser hier, den ich mir öfter mache, als ich zugeben möchte

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

Oder wenn ich versuche, einen Farbverlauf festzulegen, ohne eine background-Eigenschaft anzugeben

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

Ich hasse es, wie nah X und C auf einer Tastatur beieinander liegen, weil ich nicht zählen kann, wie oft ich etwas im Eiltempo durchgehe und px mit pc-Einheiten verwechsle.

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

Einen weiteren CSS-Fehler, den ich immer wieder entdecke, ist einer, von dem ich weiß, dass ihn viele andere Leute machen, weil ich ihn zu oft in Blogbeiträgen mit Code-Snippets sehe

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

Hast du jemals vergessen, var() um eine CSS-Variable zu setzen? Ich habe es sicher schon getan.

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

Apropos CSS-Variablen, sie zu benennen ist schwierig (wie alles andere) und ich verwende oft eine falsche Version einer Variable, die ich benannt habe!

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

/* Much later on... */

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

Ja, ich habe schon mal ein CSS-Snippet kopiert, nur damit schicke Anführungszeichen mich daran hindern, dass es funktioniert

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

Und ja, ich habe viel zu lange damit verbracht herauszufinden, dass die Anführungszeichen schuld waren.

Wenn ich mir den letzten Punkt ansehe, fällt mir ein, dass ich manchmal vergesse, die content-Eigenschaft festzulegen, wenn ich mit ::before oder ::after arbeite. Was mich daran erinnert, wie ich vergessen habe, die position eines Elements festzulegen, bevor ich versuche, es zu verschieben oder seinen z-index zu ändern. Ernsthaft, diese Dinge passieren!

Es ist schwer, über Fehler zu sprechen

Hast du jemals einen Blogbeitrag zu Ende gelesen, der einen tollen Trick verrät, und dabei eine Art Impostor-Syndrom verspürt? Ich denke, das liegt größtenteils daran, dass Blogbeiträge oft die wirkliche Arbeit – und die Misserfolge – verbergen, die in großartige Tricks einfließen. Als jemand, der solche Beiträge beruflich liest, kann ich dir sagen, dass viele, wenn nicht die überwiegende Mehrheit, viele Bearbeitungsrunden durchlaufen, bei denen potenziell peinliche Fehler ausgemerzt und geglättet werden.

Selbst diese lächerlich großartigen Artikel müssen scheitern, bevor sie all das Ooohs und Aaahs bekommen.

Dasselbe gilt für jede App, Website, Demo oder was auch immer dir begegnet. Die Chancen, dass sie beim ersten Mal perfekt herausgekommen sind, sind gleich null.

Aber wenn ich ganz ehrlich zu dir bin, bin ich oft mehr begeistert (und interessiert) von der *Reise*, die es braucht, um etwas zu erreichen, mit allen Ecken und Kanten. Die Reise ist ein Einblick, wie es ist, wie ein Front-End-Entwickler zu denken. Dort findet echtes (und das wertvollste) Lernen statt.

Und das alles baut nur auf das auf, was ich dich wirklich fragen möchte…

Was sind deine dümmsten CSS-Fehler?

Komm schon, wir alle wissen, dass du welche gemacht hast! Lass uns daraus lernen!