Mit minimalem CSS eine brauchbare Website erstellen (2023)

(thecascade.dev)

6 Punkte von GN⁺ 2025-10-07 | 1 Kommentare | Auf WhatsApp teilen

Viele Entwickler geraten durch übermäßig komplexes CSS-Design in unnötige Probleme
Schon mit minimalen globalen Styles lassen sich ausreichend saubere und responsive Seiten erstellen
Durch das Begrenzen der Größe und die Block-Darstellung von Bildern, SVGs und Videos lassen sich grundlegende Layout-Probleme lösen
Mit der Schrift system-ui, passendem Zeilenabstand und einer Begrenzung der maximalen Absatzbreite lässt sich die Lesbarkeit verbessern
Um bevorzugte Umgebungen wie den Dark Mode des OS zu berücksichtigen, sollte die Eigenschaft color-scheme verwendet werden

Mit minimalem CSS eine brauchbare Website erstellen

Das Problem von übertriebenem CSS und der Ansatz

Viele Menschen machen das CSS-Design beim Erstellen von Websites unnötig kompliziert
Schon mit minimalem CSS lassen sich ausreichend elegante und auf das Wesentliche fokussierte responsive Seiten erstellen

Grundlegendes HTML und Umgang mit Bildern

Bereits mit einfachem HTML bietet eine Website grundlegende Responsiveness
Bilder können jedoch Overflow-Probleme im Layout verursachen, daher wird das folgende CSS angewendet
```
img {
  max-width: 100%;
  display: block;
}
```
Bei SVG- und video-Elementen können ähnliche Probleme auftreten; dann lässt sich die Regel wie folgt erweitern
```
img,
svg,
video {
  max-width: 100%;
  display: block;
}
```

Verbesserung der Typografie

Die Standardschrift des Browsers wirkt gestalterisch oft etwas langweilig
Mit system-ui als Font-Family lässt sich die jeweils plattformspezifische Standardschrift verwenden
Da Standard-Schriftgröße und Zeilenabstand oft etwas zu klein ausfallen, wird folgende Anpassung empfohlen
```
body {
  font-family: system-ui;
  font-size: 1.25rem;
  line-height: 1.5;
}
```
Schon diese Einstellung bringt gegenüber den Browser-Standardwerten eine deutliche Verbesserung

Unterstützung für den Dark Mode

Da viele Nutzer den Dark Mode bevorzugen, ist die Verwendung der Eigenschaft color-scheme, die den OS-Einstellungen folgt, sinnvoll
```
html {
  color-scheme: light dark;
}
```
Diese Eigenschaft sorgt dafür, dass die User-Agent-Styles das vom System bevorzugte Theme automatisch berücksichtigen
Sie kann auch als Attribut im HTML-Tag angegeben werden
```
<html lang="en" color-scheme="light dark"></html>
```
Es gilt außerdem als gute Best Practice, Nutzern nicht nur den Systemwert zu überlassen, sondern auch eine direkte Auswahl des Farbschemas zu ermöglichen

Begrenzung der Inhaltsbreite

Die Länge von Inhaltsabsätzen ist ein wichtiger Faktor für die Lesbarkeit
Im Allgemeinen ist es ideal, wenn Fließtext mit 45 bis 90 Zeichen pro Zeile dargestellt wird
Durch eine Begrenzung der maximalen Breite des main-Elements wie unten gezeigt lässt sich die Lesbarkeit von Absätzen verbessern
```
main {
  max-width: min(70ch, 100% - 4rem);
  margin-inline: auto;
}
```
Die Funktion min() wählt den kleineren Wert aus 70ch und 100% - 4rem
Mit margin-inline: auto wird horizontal zentriert
Bei Bedarf kann statt main auch eine Klasse wie .container oder .wrapper verwendet werden

Beispiel für das endgültige minimale CSS

Fasst man das oben Gesagte zusammen, lässt sich mit dem folgenden minimalen CSS-Set eine stabile Website aufbauen

html {
  color-scheme: light dark;
}

body {
  font-family: system-ui;
  font-size: 1.25rem;
  line-height: 1.5;
}

img,
svg,
video {
  max-width: 100%;
  display: block;
}

main {
  max-width: min(70ch, 100% - 4rem);
  margin-inline: auto;
}

Abschluss und Erweiterbarkeit

Das obige Beispiel lässt sich sofort als leichter Ausgangspunkt oder für kleine Seiten einsetzen
In den meisten Fällen ist es sinnvoll, diese Basis mit zusätzlichen Styles zu erweitern

1 Kommentare

GN⁺ 2025-10-07

Hacker-News-Kommentare

Alter Artikel, aber eine gute Zusammenfassung, warum die system-ui-Font-Family in einigen Regionen weiterhin nicht zu empfehlen ist
https://infinnie.github.io/blog/2017/systemui.html
- Der Inhalt war interessant, aber ich finde die st-Ligatur dieser Schrift so hässlich, dass ich mir von dieser Website keine Font-Ratschläge holen möchte
Ehrlich gesagt verstehe ich es nicht so ganz. Ich verstehe den Wunsch, eine gut lesbare minimalistische Webseite zu bauen. Aber die nötigen Methoden dafür sind doch längst ziemlich bekannt, oder? Ich frage mich, wer die Zielgruppe ist, die damit Schwierigkeiten hat. Und ich frage mich auch, warum das auf HN so populär ist
- Ich. Ich bin hauptsächlich Backend-Entwickler und baue gelegentlich im Rahmen von Side Projects auch Frontends, aber ich weiß fast nichts über CSS. Für mich sind solche Methoden nicht „allgemein bekannt“. Ich tue mich jedes Mal schwer damit, weil ich CSS nicht beherrsche
- Leute, die schon an einem einzigen max-width verzweifeln? Zielgruppe sind alle, die eine persönliche Homepage bauen

font-family: System UI;

Das ist falsch. Die korrekte Syntax ist

font-family: system-ui;

Der Autor verwendet es in manchen Beispielen korrekt, im ersten Beispiel aber falsch, was verwirrend sein kann

Ich frage mich, ob man Font-Namen in doppelte Anführungszeichen setzen muss, wenn sie aus zwei Wörtern bestehen. Zum Beispiel

font-family: Times New Roman;

so. Sowohl times als auch Times New Roman scheinen ohne Anführungszeichen zu funktionieren, daher frage ich mich, ob das eine Sonderbehandlung für alte Fonts ist oder ob CSS beim Namensabgleich einfach großzügig ist

https://meyerweb.com/eric/tools/css/reset/
Das hier würde ich einfach „Cache Money“ nennen
- Eric Meyer ist eine Legende in der CSS-Welt. 2002 habe ich dank seiner Erklärung endlich das Box-Modell verstanden, nachdem ich es zuvor nicht begriffen hatte
  https://meyerweb.com/eric/books/
- Das sehe ich oft, aber für meine Augen fühlt es sich irgendwie merkwürdig an. Es ist weder simpel genug noch modern/minimalistisch. Auch die Schrift selbst scheint sich nicht besonders gut lesen zu lassen. Vielleicht einfach nur mein Geschmack
- CSS-Reset-Stylesheets sind der Anfang von Stilverschmutzung. Ein Ansatz à la Kevin Powell (die Standard-Browser-Stile respektieren) ist besser. Cross-Browser-Tests sind zwar nötig, aber seit fast 20 Jahren werden CSS-Resets wie ein Standard mitgeschleppt, und darauf werden dann noch Frameworks gestapelt, was die Komplexität nur erhöht. Heute kann man mit modernem CSS Grid, Variablen usw. viel kreativer vorgehen und die alten Muster hinter sich lassen. Früher mochte ich CSS nicht, weil es voller Workarounds war, aber heute fühlt es sich eher an wie das Zusammenbauen von perfekt passenden Legosteinen. Ein CSS-Reset ist inzwischen nicht mehr zwingend nötig, sondern eher ein Hilfsmittel, um diese Angst loszuwerden. Auch CSS-Preprocessor braucht man heute kaum noch
Frage nach Empfehlungen für einen SSG (static site generator) für eine schlichte akademische Minimal-Website. Astro und Hugo stehen zur Wahl, aber Astro wirkte zu komplex, und HTML/CSS direkt zu schreiben ist bei Layout und Anpassung unpraktisch. Es gibt auch kaum Astro-Themes für persönliche Blogs, die meisten sind eher für Unternehmen oder sehr verspielt. Bei solchen Überlegungen staunt man erneut darüber, warum Webdesign so schwierig geworden ist. Ich frage mich, wie Webentwickler mit Frameworks, Komponenten und zahllosen Abhängigkeiten überhaupt noch Schritt halten
- Ich empfehle Eleventy(https://11ty.dev/) oder Zola(https://getzola.org/). Beides sind relativ neue Tools mit vielen kompetenten Nutzern
- Das ist die natürliche Komplexität von Websystemen. Einfachheit kann nicht erhalten bleiben. Trotzdem bin ich dankbar für offene Standards und Frameworks, die man ohne Lizenz verwenden kann. Es gibt nur zu viele Optionen, sodass man am Ende an der Auswahl scheitert
- Schon solche Diskussionen verdecken die Peinlichkeit des modernen Webs. Außer großen Webdiensten wie Facebook gibt es fast nichts von Wert, und das ist beschämend
- Vielleicht braucht man nicht noch mehr Optionen, aber franklin.jl war für mich genau richtig, was Mathematik, Inline-Code-Verarbeitung und Schlichtheit angeht
Diese Website selbst verwendet viel mehr CSS als im Artikel vorgeschlagen wird, grob geschätzt über 300 Zeilen. Trotzdem ist es als Ausgangsbasis ganz okay
- Danke, dass du diese Tatsache auf dem Handy geprüft hast. Das schmälert für mich die Glaubwürdigkeit dieses Mediums. Ich werde das später selbst nachprüfen. Trotzdem hoffe ich, dass die vorgestellten Techniken gut umgesetzt wurden
Wenn ich den Vorschlag sehe, „die Inhaltsbreite für bessere Lesbarkeit zu begrenzen“, dann würde ich lieber darauf verzichten. Egal, was Usability-Studien sagen, ich mag große Breiten. Man kann die Inhaltsbreite ja schon durch Ändern der Browsergröße steuern
- Wenn man die Browsergröße ändert, wird das ganze Fenster kleiner, was eher noch unpraktischer ist. Wenn man zum Beispiel einen 80-Spalten-Text, der am linken Rand klebt, in die Mitte bringen will, muss man ständig die Browsergröße anpassen, was extrem lästig ist. Manchmal ist das so unpraktisch, dass ich das Stylesheet der Seite selbst überschreibe. Manchmal denke ich dann auch, es wäre besser, einfach Klartext zu lesen. Oder ich schalte in den Reader Mode
- Fast alle Leute, die ich kenne, ob tech-affin oder nicht, haben ständig unzählige Tabs offen. Die Wahrscheinlichkeit, dass jeder dieser Tabs nur aus einer einzigen Textzeile besteht, liegt bei 0 %. Das Browserfenster jedes Mal neu anzupassen fühlt sich fast so an, als wäre es praktischer, den Text mit einem Nadeldrucker auszudrucken und so zu lesen. Leicht übertrieben gesagt
- Für Fließtext wird eine begrenzte Breite bevorzugt. Auf breiten Bildschirmen ist es anstrengend, den Blick beim Lesen bis ganz ans Zeilenende zu bewegen
- Dass dieser Kommentar die meisten Upvotes bekommen hat, zeigt nur, dass man Ratschläge auf HN nicht allzu ernst nehmen sollte
- Eine Begrenzung der Inhaltsbreite ist an sich okay. Aber ich ärgere mich über den Missbrauch von content-width, großen Fonts und großem Zeilenabstand. Viele Websites verwenden heute übergroße Schriften und weite Zeilenabstände, sodass man viel zu viel scrollen muss. Die Standard-Font-Größe des Browsers ist auf das System abgestimmt, daher sollte man die Font-Größe lieber unverändert lassen und Zoom dafür verwenden
Man muss den Artikel gar nicht lesen, die Antwort ist offensichtlich. Und diese Antwort ist 0
- Die Standard-Styles sind gerade im Umgang mit Bildern auf Mobilgeräten ziemlich unpraktisch. Wenn man, wie im Artikel gesagt, etwas „ziemlich gut Aussehendes“ möchte, ist es meiner Meinung nach mit den Defaults nicht getan
- Die Browser-Standardschrift ist Serif
Ein gewisses Maß an Standardisierung per CSS-Reset ist weiterhin nötig. Wenn man nur Browser der letzten fünf Jahre als Ziel hat, reicht ein kompaktes, bereinigtes populäres Reset völlig aus
- Der Kernpunkt ist nicht Stilvereinheitlichung, sondern eine gut lesbare Basis. Es ist in Ordnung, wenn es auf verschiedenen Plattformen oder in verschiedenen Browsern unterschiedlich aussieht, solange es gut lesbar bleibt. Praktischer ist es, sich auf grundlegende Nutzbarkeit statt auf ästhetische Perfektion zu konzentrieren
- Resets werden überschätzt. Für etwas Minimalistisches wie einen persönlichen Blog ist es kein großes Problem, wenn sich die Darstellung je nach Plattform leicht unterscheidet. Dieser Drang, alles zwanghaft anzugleichen, entspringt eher einem Designer-Reflex

img { max-width: 100%; }
Diese Einstellung muss unbedingt zusammen mit height: auto verwendet werden. Sonst wird das Seitenverhältnis des Bildes verzerrt
img, svg, video { max-width: 100%; }
In Chrome 141 wird die auto-Berechnung wegen eines Problems mit width/height bei verschachtelten SVG-Elementen falsch. Übergangsweise muss man es mit
svg:where(:not(svg svg)) behandeln
Die system-ui-Schrift ist nicht einfach nur ein Ersatz für sans-serif. Wenn man System-UI-Fonts für den Fließtext verwendet, kann das auf manchen OS-/Sprachkombinationen fast unlesbar unbequem sein. Wenn man sans-serif braucht, sollte man sans-serif verwenden
Die Standard-Font-Größe ist etwas klein, etwa 18–20px (1.25rem) sind angemessen. Auf kleinen Bildschirmen sollte man aber besser nicht über 1rem gehen
Als Standard-line-height werden oft 1.5–1.7 empfohlen, aber 1.7 ist auf kleinen Bildschirmen zu weit. 1.4–1.5 ist angemessen, und je nach Bildschirmgröße kann man bis etwa 1.4–1.6 anpassen
font-family: System UI;
Das ist ein eindeutiger Syntaxfehler. Wenn man das Stylesheet prüft, sieht man das sofort
Es ist eine gute Idee, dunkles/helles System-Theme und Web-Theme voneinander zu trennen. Firefox ist standardmäßig so eingestellt, dass Inhalte dem System-Theme folgen, und das lässt sich auch separat anpassen
main { max-width: min(70ch, 100% - 4rem); margin-inline: auto; }
Das bedeutet einen Mindestabstand von etwa 2rem (zusammen mit dem Standard-body-Margin also 2rem + 8px). Das ist zu viel Abstand, und die Stelle, an der es angewendet wird, wirkt seltsam. Wenn man es auf main anwenden will, ist es logischer, Padding zu verwenden, also etwa

main {
  max-width: 70ch;
  padding-inline: 2rem;
  margin-inline: auto;
}

In der Praxis brauchen aber auch header und footer denselben seitlichen Abstand, daher ist es besser, stattdessen den body-Margin anzupassen

body {
  margin: 1rem;
}

main {
  max-width: 70ch;
  margin-inline: auto;
}

Damit lässt sich der Rand von etwa 40px auf ungefähr 16px reduzieren

Realistisch gesehen lassen sich die meisten Layout-Anpassungen und Feinabstimmungen ohnehin mit Media Queries lösen. In diesem Fall wird der Code am Ende im Vergleich zu normal gut geschriebenem CSS auch nicht viel länger

Mit minimalem CSS eine brauchbare Website erstellen (2023)