Ein Leitfaden zu CSS-Einheiten — Teil 3: Prozentangaben, Viewports, Magic Numbers und Best Practices

Hinweis: Dieser Artikel wurde unter Zuhilfenahme von KI aus dem Englischen übersetzt. Hier geht's zum Originaltext.

Hast du Teil 1 oder Teil 2 dieser Serie verpasst?

Eine Einheit, die ziemlich oft in CSS verwendet wird, ist %. Sie wird meistens als prozentuale Anteile der gleichen Eigenschaft im Elternelement interpretiert. So macht eine width: 66.66% ein Element zwei Drittel so breit wie sein Elternelement, aber ein font-size: 150% erhöht die aktuell eingestellte Schriftgröße um 50%. Es gibt ein paar knifflige Ausnahmen, zum Beispiel bezieht sich padding-top: 50% nicht auf das Padding eines Elternelements, sondern auf dessen Breite. Mehr dazu in diesem Artikel über die bösen Teile von CSS... Und bitte verwende sie nicht falsch 🙏

Schauen wir mal, ob du dieses Quiz lösen kannst:

• Wie breit (in px) würde das Logo für die Mehrheit der Nutzer auf einem großen Bildschirm dargestellt werden?
• Wie breit (in px) würde das Logo für die Mehrheit der Nutzer auf einem Handy mit einer Bildschirmbreite von 380px dargestellt werden?
• Wie groß (in px) würde der Text im <p> unter dem Logo für die Mehrheit der Nutzer dargestellt werden?

Gut gemacht! Wenn du weiter experimentieren möchtest, hier ist ein Pen.

vw (viewport width) und vh (viewport height) sind Prozentwerte (0—100) relativ zum Browser-Viewport (dem Browserfenster ohne die UI). Auf einem 380px breiten Handybildschirm würden also 50vw als 190px dargestellt werden, unabhängig vom Kontext oder Elternelementen. In Desktop-Browsern beziehen sich diese Einheiten auf das Innere des Browserfensters (oder in JavaScript-Sprache, das window).

vmin und vmax sind entweder vw oder vh, je nachdem, welche Seite des Viewports größer/kleiner ist. Du wirst diese selten verwenden, aber CSS-Tricks hat ein gutes Anwendungsbeispiel.

Die Verwendung von prozentbasierten Werten wie 50% oder 25vh für Breiten und Höhen ist großartig für die Lesbarkeit des Codes, weil sie sofort ein Gefühl dafür vermitteln, wie ein Element in einem Design konstruiert ist. Wenn deine Werte zu undurchsichtig werden (6,25%, 56,25%, …), solltest du einen Kommentar hinzufügen ("1/16" oder "Seitenverhältnis 16:9"). Womit wir zum Thema kommen...

"Magic Numbers" (Werte mit unerklärbarer Bedeutung, die durch benannte Konstanten ersetzt werden könnten/sollten) sind der Albtraum eines echten Entwicklers™️: Wie aus dem Nichts springt dich ein unbenanntes, unkommentiertes padding-left an und beißt dir das Gesicht ab!

Einige Projektteams gehen damit um, indem sie gigantische Theme-Dateien pflegen, in denen jedes Padding einen Namen bekommt, der idealerweise (aber in der Realität selten) an mehreren Stellen wiederverwendet wird. So wird aus deinem padding-left: 2.25rem plötzlich padding-left: ${theme.sizes.infoBoxLeftPadding}, und du bist super zuversichtlich, dass wenn ein anderer Entwickler in ein paar Monaten vorbeikommt, er sagen wird: "Hey! Ich habe das gleiche linke Padding in meinem Komponenten-Design, vielleicht kann ich das einfach wiederverwenden". Aber dann später verringert eine Design-Änderung das linke Padding für ihre Komponente und plötzlich sieht deine ursprüngliche Arbeit anders aus. Super...

Ich sehe es so: CSS übersetzt Designentscheidungen (von der Leinwand eines Designers) in den Browser. Diese Entscheidungen sind nicht immer das Ergebnis eines logischen Prozesses, sie können bloße Ausdrücke von Geschmack und Erfahrung mit Ästhetik, Typografie, Farben und so weiter sein. Es ist die Aufgabe eines guten CSS-Entwicklers, zwischen den Deklarationen zu unterscheiden, die es wert sind, abstrahiert und global wiederverwendet zu werden, und den lokalen Ausnahmen und Eigenheiten eines schönen Designs.

Deine Designer verwenden ein konsistentes Schriftgrößenverhältnis und Farbschema? Großartig! Lege sie in einer Theme-Datei ab und verwende aussagekräftige Namen! Noch wichtiger: Hole alle Teammitglieder mit ins Boot, damit diese Namen entsprechend wiederverwendet werden. Erstelle eine gute Übersicht für all das in deinem Storybook oder was auch immer du verwendest.

Eine Komponente wurde mit einer Überschriftgröße von 1,25rem gestaltet? Verwenden andere Komponenten diese Größe? Ist der gesamte Schriftstil (Gewicht, Farbe, Zeilenhöhe, Buchstabenabstand usw.) vielleicht eine Abstraktion zu einer Unterkomponente wert? Wenn die Antwort auf all diese Fragen nein ist, schreibe ich persönlich die Größe direkt in das CSS dieser Komponente und kümmere mich nicht darum, die Theme-Datei zu erweitern. Für mich ist das keine magische Zahl, es ist einfach eine Design-Entscheidung, mit der ich leben muss – und kann.

Es gibt aber durchaus Magic Numbers in CSS! Oftmals willst du deinen Designer glücklich machen und schreibst etwas wie left: 9% oder width: calc(100% - 3,3rem) – Werte, die du durch Versuch und Irrtum gefunden hast. Es könnte sich lohnen, darüber nachzudenken, ob es vielleicht einen anderen Weg gibt. Wenn das nicht möglich ist, hinterlasse einen Kommentar dazu, wie der nächste Entwickler deine Entscheidung nachvollziehen kann.

Hier noch einige (völlig subjektive) Tipps und Tricks zum Dimensionieren von Elementen in CSS:

• Die Verwendung von rem für die meisten Dinge ist zur gängigen Praxis geworden, 1rem wird meist als 16px dargestellt (erinnerst du dich?). Aus diesen Gründen ist es eine gute Idee für dein Projektteam (Designer und Entwickler), festzulegen, dass Breiten, Längen, Höhen und Größen in den Design-Dateien immer Vielfache von 4px sein sollten, damit die rem-Umrechnung einfacher ist. 4 ist klein genug, um flexibel zu sein, und groß genug, damit die Dezimalbrüche nicht zu verrückt werden. Ich gestehe ein, dass Schriftgrößen wahrscheinlich eine feinere Granularität benötigen, aber für alles andere hilft dies auch dem visuellen Gleichgewicht.
• Für Rahmen-/Konturbreiten und andere sehr kleine Werte: Verwende px, damit sie scharf und nicht verschwommen dargestellt werden (darüber werden wir in Teil 4 mehr sprechen)
• Wenn du wirklich gerne in px denkst und dich rem unwohl fühlt, gibt es Tools, die helfen können: pxtorem
• Für Typografie können harmonische Schriftskalen schön sein und die Berechnungen für Entwickler ebenfalls etwas erleichtern!
• Verwende ein Raster (vorzugsweise CSS-Grid) und lass das Raster die Arbeit der Positionierung und Dimensionierung erledigen.
• Verwende em in Media Queries, da es deine Breakpoints mit den Schriftgrößeneinstellungen des Benutzers skaliert (rem tut das auch, aber es gibt Bugs in Safari)
• Versuche für Breiten und Höhen geeignete, lesbare Verhältnisse wie 66% (zwei Drittel), 80vw (vier Fünftel) usw. zu finden.
• Inline-Elemente (Links, Schaltflächen, Icons, ...) werden oft nicht explizit dimensioniert. Zum Beispiel ist ein Button oft nur so groß, wie er basierend auf seinem Textinhalt sein muss (intrinsische Größe). In diesem Fall müssen wir uns nur um Schriftgröße und Padding kümmern.
• Entwickler, sprecht mit euren Designern, um herauszufinden, warum sie sich für die Größe eines Elements entschieden haben!
• Es ist die Aufgabe eines guten Designers, sich der Einschränkungen und des Verhaltens der Webplattform bewusst zu sein. Es reicht nicht aus, dein Design auf deiner Skizzen-Leinwand gut aussehen zu lassen, wenn ein Entwickler später raten muss, wie beispielsweise ein Hintergrundbild positioniert werden soll. Sei explizit und versuche, rund um Raster und relative Werte zu konstruieren. Wenn du dich dabei ertappst, Elemente auf der Leinwand herumzuschieben, versuche zumindest, eine Notiz zu hinterlassen, die deine Entscheidungen erklärt und warum sie für das Design wichtig sind.
• Mit anderen Worten: Sprecht miteinander, ratet nicht!
• Wenn du innerhalb eines Frameworks arbeitest, das wiederverwendbare Komponenten ermöglicht, vermeide Margins für Layoutabstände und verwende stattdessen Spacer-Komponenten. Margin kann als schädlich angesehen werden.
• Was auch immer du tust, versuche innerhalb deines Projekts konsistent zu sein.

Damit ist alles zusammengefasst, woran ich in Bezug auf Dimensionierung in CSS glaube. Was für eine Reise... Als Nächstes werden wir diese Serie mit dem Rest der Truppe abschließen: Winkel, Zeiteinheiten und ein paar Überraschungen!

Header-Foto von Markus Spiske auf Unsplash