Warum ist CSS frustrierend?

Hier ist ein großartiger Thread von Kevin Powell, der gerade die Runde macht. Er glaubt, dass so viele Leute CSS als frustrierende und ärgerliche Sprache ansehen

Das ist genauso unintuitiv wie bei JS, das bei 0 zu zählen beginnt, aber da du das gelernt und akzeptiert hast, ist es in Ordnung.

Das eigentliche Problem liegt nicht bei CSS. Wenn du damit Schwierigkeiten hast oder es jemals unintuitiv nennst, liegt es wahrscheinlich daran, dass du nicht wirklich verstehst, wie CSS funktionieren soll.

— Kevin Powell (@KevinJPowell) 24. Februar 2020

Warum respektieren die Leute JavaScript oder andere Sprachen genug, um sie bis ins kleinste Detail zu lernen, und verspotten gleichzeitig ständig CSS? Nun, all das erinnert mich an das, was Jeremy Keith vor einiger Zeit geschrieben hat, als er argumentierte, dass CSS einfach, aber nicht leicht ist

Im Gegensatz zu einer Programmiersprache, die Kenntnisse über Schleifen, Variablen und andere Konzepte erfordert, ist CSS recht einfach zu erlernen. Vielleicht hat es gerade deswegen den Ruf, einfach zu sein. Es ist einfach im Sinne von „nicht komplex“, aber das bedeutet nicht, dass es leicht ist. „Einfach“ mit „leicht“ zu verwechseln, führt nur zu Herzschmerz.

Ich denke, das ist es, was einigen Programmierern passiert, die zum ersten Mal zu CSS kommen. Sie haben gehört, dass es einfach ist, also gehen sie davon aus, dass es leicht ist. Aber wenn sie dann versuchen, es zu benutzen, funktioniert es nicht. Es muss die Schuld der Sprache sein, denn sie wissen, dass sie schlau sind und dass dies einfach sein soll. Also geben sie der Sprache die Schuld. Sie sagen, sie sei kaputt. Und so versuchen sie, sie zu „reparieren“, indem sie sie an eine programmatischere Denkweise anpassen.

Es gab Zeiten, da habe ich mich mit Ingenieuren zusammengesetzt, um mit ihnen über ein kniffliges Layout-Problem zu sprechen, und das CSS wurde als unter ihnen stehend behandelt – als ob die Sprache irgendwie zu unvorhersehbar wäre, um gelernt und gemeistert zu werden. Vielleicht hat das etwas mit der Vergangenheit zu tun, als wir Jahre damit verbrachten, gegen die unterschiedliche Darstellung durch Browser zu kämpfen. Aber das ist größtenteils ein gelöstes Problem. Ich kann mich nicht erinnern, wann ich das letzte Mal so gegen Browser gekämpft habe.

Stattdessen glaube ich, dass das größte Problem, mit dem Ingenieure konfrontiert sind – und der Grund, warum sie es alle so verdammt frustrierend finden – darin besteht, dass CSS dich zwingt, dich der Web-Eigenart des Webs zu stellen. Dinge erfordern Fallbacks. Sie müssen verschiedene Geräte und alle verschiedenen Arten, eine Website zu sehen, berücksichtigen: Mobil, Desktop, keine Maus, keine Tastatur usw. Sicher, das muss man auch beim Schreiben von JavaScript beachten, aber es ist leichter zu ignorieren. Man kann nicht ignorieren, dass das Layout deiner Website auf einem Telefon komplett kaputt ist.

Nebenbemerkung: Wir haben einen Leitfaden zum Zentrieren in CSS nicht, weil CSS kaputt und dumm ist, sondern weil es so viele Variablen gibt, dass eine einfache Frage wie „Wie zentriere ich Text?“ tatsächlich viel komplizierter ist, als sie scheint. Es geht viel Kontext verloren.

Das erinnert mich an einen meiner Lieblings-Blogbeiträge aller Zeiten, in dem Brandon Smith argumentiert, dass CSS großartig ist und wir die Sprache respektieren und lernen sollten, wie sie unter der Haube funktioniert

CSS ist schwer, weil seine Eigenschaften interagieren, oft auf unerwartete Weise. Denn wenn du eine davon festlegst, legst du nie nur diese eine Sache fest. Diese eine Sache kombiniert sich mit einem Dutzend anderer Dinge, prallt von ihnen ab und widerspricht ihnen, einschließlich Standarddingen, die du selbst nie wirklich festgelegt hast.

Eine Faustregel zur Abmilderung dessen ist: Sei niemals expliziter als nötig. Webseiten sind standardmäßig responsiv. Gutes CSS zu schreiben bedeutet, diese Tatsache zu nutzen, anstatt sie zu überschreiben. Verwende wenn möglich Prozent- oder Viewport-Einheiten anstelle einer Media Query. Verwende min-width anstelle von width, wo du kannst. Denke in Begriffen von Regeln, in Begriffen von was du wirklich sagen willst, anstatt nur Eigenschaften hinzuzufügen, bis die Dinge richtig aussehen. Versuche, ein Gefühl dafür zu bekommen, wie der Browser Layout und Größen bestimmt, und nimm deine Änderungen und Ergänzungen darauf basierend maßvoll vor. Arbeite mit CSS, anstatt dagegen.