Me: "Center this div."
CSS: "No."
Me: "display: flex;"
CSS: "Still no."
Me: "justify-content: center;
align-items: center;"
CSS: "Interesting... but also no." 😭
At some point you stop writing CSS...
...and start negotiating with it.
Ich finde das Statement "verhandeln mit CSS" trifft das Thema sehr gut, denn das ist eigentlich die Idee des WWW (World Wide Web). Wir verhandeln als Webseite mit dem Browser, oder besser gesagt mit dem Gerät eines Nutzers.
CSS macht das sehr schnell sehr klar, JavaScript nicht ganz so offensichtlich. Entwicklerabstraktionen wie Frameworks oder TypeScript lenken hier etwas ab, denn sie machen das intern, suggerieren Entwicklern aber oft (implizit), dass es nicht nötig wäre sich selbst darum zu kümmern.
Und so sehen wir mittlerweile ein massives Missachten dieser Prinzipien: Progressive Enhancement oder Graceful Degradation sind nicht mehr weit verbreitet in Web Services.
⠗⠎ Remy Sharp hat hier gerade erst einen guten Artikel zu Progressive Enhancement in JavaScript geschrieben.
Wenn du verstehst, wie Browser funktionieren, wie CSS Methoden funktionieren (Box Sizing, CSS Object Model) und berechnet werden, dann ist das Zentrieren von Objekten zwar immer noch kein Kinderspiel, aber du weißt ganz genau, wie es in welcher Situation funktioniert und wo du debuggen musst, wenn etwas nicht funktioniert. Du verhandelst dein visuelles Produktziel mit den Web Technologien. Kein Beten, keine "div Magie" nötig.
- ✅ Beherrsche dein Handwerk.
- ✅ Debugge und teste früh und ständig.
- ✅ Lebe Progressive Enhancement und hör auf statische Softwareartefakte für das Web zu bauyen. Deine Nutzer werden es dir danken!