CSS Tipps, die ich gerne früher gekannt hätte

CSS gehört zu diesen Dingen, bei denen man ziemlich schnell brauchbare Ergebnisse bekommt und trotzdem Jahre später noch über Kleinigkeiten stolpert, die man bisher einfach nicht kannte. Das liegt gar nicht unbedingt daran, dass CSS besonders kompliziert wäre. Vieles davon begegnet dir schlicht nicht, wenn du immer wieder dieselben Lösungen verwendest.

Gerade wenn du hauptsächlich mit Java arbeitest und HTML und CSS eher die Oberfläche deiner Anwendung bilden, passiert das schnell. Eine Seite soll vernünftig aussehen, also bekommt ein Element ein bisschen padding, hier kommt ein margin dazu, dort wird eine Breite gesetzt und irgendwann sieht es so aus, wie es aussehen soll.

Das funktioniert, manchmal geht es aber deutlich einfacher.

CSS hat eine ganze Reihe kleiner Funktionen und Kurzschreibweisen, die keine komplizierten Spezialkenntnisse erfordern und trotzdem erstaunlich viel Code sparen können. Einige davon sind so praktisch, dass ich sie inzwischen fast selbstverständlich verwende.

Genau um diese kleinen Dinge geht es hier. Keine abgefahrenen CSS Experimente und keine Funktionen, die du einmal im Jahr brauchst, sondern Dinge, die dir bei normalen Oberflächen tatsächlich regelmäßig begegnen können.

Vier Werte, zwei Werte, ein Wert: CSS kann Kurzschrift

Fangen wir mit einem Klassiker an, den erstaunlich viele nicht kennen oder zumindest nicht vollständig nutzen: margin und padding.

Natürlich kannst du jede Seite einzeln angeben:

.card {
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 10px;
    padding-left: 20px;
}

Das ist vollkommen korrekt. Es ist aber unnötig ausführlich. Dieselbe Regel kannst du auch so schreiben:

.card {
    padding: 10px 20px 10px 20px;
}

Die Reihenfolge läuft dabei im Uhrzeigersinn:

oben rechts unten links

Noch interessanter wird es, wenn sich Werte wiederholen. Haben oben und unten denselben Abstand und links und rechts ebenfalls, reichen zwei Werte:

.card {
    padding: 10px 20px;
}

Der erste Wert gilt für oben und unten, der zweite für links und rechts.

Wenn überall derselbe Abstand gelten soll, reicht sogar ein einziger Wert:

.card {
    padding: 20px;
}

Es gibt außerdem die Variante mit drei Werten:

.card {
    padding: 10px 20px 30px;
}

Dabei gelten 10px oben, 20px links und rechts und 30px unten.

Dasselbe funktioniert natürlich mit margin.

Gerade bei horizontalen Abständen lohnt sich inzwischen außerdem ein Blick auf die sogenannten logischen Properties. Statt

.content {
    padding-left: 20px;
    padding-right: 20px;
}

kannst du schreiben:

.content {
    padding-inline: 20px;
}

Für oben und unten gibt es entsprechend padding-block.

Das wirkt zunächst nur wie eine andere Schreibweise, hat aber einen zusätzlichen Vorteil. inline und block orientieren sich an der Schreibrichtung des Dokuments. Bei normalen deutschsprachigen Webseiten entspricht inline praktisch links und rechts und block oben und unten.

Ein weiterer Klassiker ist das Zentrieren eines Containers:

.content {
    max-width: 1200px;
    margin: 0 auto;
}

0 bedeutet hier kein Abstand oben und unten. auto sorgt links und rechts dafür, dass der verfügbare Platz gleichmäßig verteilt wird. Das funktioniert allerdings nur sinnvoll, wenn das Element nicht ohnehin die komplette verfügbare Breite einnimmt.

Kurzschreibweisen gibt es auch an anderen Stellen. Statt

.box {
    border-width: 1px;
    border-style: solid;
    border-color: #ccc;
}

reicht normalerweise:

.box {
    border: 1px solid #ccc;
}

Das klingt alles nach Kleinkram. Genau das ist es auch. Aber CSS besteht zu einem großen Teil aus solchem Kleinkram, und wenn du ihn etwas kompakter ausdrücken kannst, wird deine Stylesheet Datei schnell deutlich angenehmer zu lesen.

Lass CSS mehr Arbeit übernehmen

Ein Wert, den ich bei eigenen Layouts fast immer sehr früh setze, ist:

* {
    box-sizing: border-box;
}

Standardmäßig arbeitet CSS bei Breiten nämlich nicht unbedingt so, wie man es intuitiv erwarten würde.

Angenommen, du hast dieses Element:

.box {
    width: 300px;
    padding: 20px;
    border: 1px solid;
}

Mit dem Standardwert content-box beziehen sich die 300px nur auf den Inhalt. Padding und Rahmen kommen noch dazu. Das Element ist also tatsächlich breiter als 300 Pixel.

Mit border-box gehören Padding und Border zur angegebenen Breite. 300px bedeuten dann tatsächlich 300 Pixel Gesamtbreite.

Das erspart gerade bei Formularen, Karten und mehrspaltigen Layouts eine Menge unnötiger Rechnerei.

Eine ähnliche Vereinfachung gibt es bei Abständen innerhalb von Flexbox und Grid. Früher hat man häufig jedem Element ein margin-right gegeben und anschließend beim letzten Element versucht, diesen Abstand wieder zu entfernen.

Heute reicht meistens:

.actions {
    display: flex;
    gap: 10px;
}

gap funktioniert nicht nur bei Grid, sondern auch bei Flexbox. Der Abstand entsteht nur zwischen den Elementen. Du brauchst also keine Sonderbehandlung für das erste oder letzte Element.

Auch Flexbox selbst hat einige kleine Tricks, die im Alltag praktisch sind. Angenommen, du hast eine Toolbar mit mehreren Elementen und möchtest einen Button ganz nach rechts schieben:

.toolbar {
    display: flex;
}

.logout {
    margin-left: auto;
}

Das auto übernimmt den gesamten verfügbaren Platz links vom Element und schiebt es dadurch nach rechts. Dafür brauchst du weder zusätzliche Container noch komplizierte Flexbox Konstruktionen.

Bei Größenangaben musst du ebenfalls nicht immer einen festen Wert verwenden. CSS kann rechnen:

.content {
    width: calc(100% - 40px);
}

Noch praktischer sind manchmal min() und max().

Ein Container, der maximal 1200 Pixel breit werden, auf kleinen Displays aber innerhalb des verfügbaren Platzes bleiben soll, kann beispielsweise so aussehen:

.content {
    width: min(1200px, 100%);
}

Für responsive Schriftgrößen gibt es außerdem clamp():

h1 {
    font-size: clamp(2rem, 5vw, 4rem);
}

Der erste Wert ist die minimale Größe, der letzte die maximale Größe. Dazwischen darf CSS abhängig von der Viewport Breite skalieren.

Du musst clamp() nicht überall einsetzen. Aber gerade dort, wo du sonst mehrere Media Queries nur für leicht unterschiedliche Größen schreiben würdest, kann es sehr praktisch sein.

Auch Bilder lassen sich mit wenigen Regeln deutlich zuverlässiger behandeln. Wenn ein Bild einen bestimmten Bereich komplett ausfüllen soll, ohne verzerrt zu werden, helfen aspect-ratio und object-fit:

.thumbnail {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

Der Browser hält das Seitenverhältnis von 16 zu 9 ein. Ist das eigentliche Bild anders proportioniert, wird es passend zugeschnitten statt gequetscht.

Das ist wesentlich sauberer als mit festen Pixelhöhen herumzurechnen.

Kleine Regeln, die erstaunlich viele Probleme lösen

Manche CSS Eigenschaften wirken unscheinbar, lösen aber typische Probleme mit einer einzigen Zeile.

Ein schönes Beispiel sind sehr lange Texte, URLs oder Dateinamen. Irgendwann landet ein String in deiner Oberfläche, der einfach nicht umbrechen möchte und plötzlich dein komplettes Layout auseinanderdrückt.

Dagegen hilft:

.text {
    overflow-wrap: anywhere;
}

Der Browser darf den Text dann notfalls an einer beliebigen Stelle umbrechen.

Wenn du stattdessen bewusst nur eine Zeile anzeigen möchtest, kannst du zu lange Inhalte abschneiden:

.title {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

Aus einem zu langen Text wird dann beispielsweise sichtbar:

Das ist ein sehr langer Dateiname...

Wichtig ist dabei die Kombination der Eigenschaften. text-overflow: ellipsis alleine reicht nicht.

Praktisch ist auch currentColor. Dieser Wert übernimmt die aktuelle Textfarbe des Elements.

Statt also beispielsweise Folgendes zu schreiben:

.link {
    color: #3366cc;
    border-color: #3366cc;
}

kannst du schreiben:

.link {
    color: #3366cc;
    border-color: currentColor;
}

Änderst du später die Textfarbe, ändert sich der Rahmen automatisch mit. Das funktioniert auch bei SVG Icons und anderen Eigenschaften, die Farben erwarten.

Bei Selektoren gibt es ebenfalls kleine Helfer. Wenn mehrere Elemente dieselben Styles bekommen sollen, kennst du wahrscheinlich diese Schreibweise:

button,
.button,
input[type="submit"] {
    cursor: pointer;
}

Mit :is() lassen sich vor allem längere Selektoren kompakter schreiben:

.form :is(input, select, textarea) {
    font: inherit;
}

Damit sprichst du innerhalb von .form alle drei Elementtypen an.

Das Gegenstück dazu ist :not():

button:not(.disabled) {
    cursor: pointer;
}

Damit gilt eine Regel für Buttons, außer sie besitzen die Klasse disabled.

Bei Formularen und Buttons solltest du außerdem :focus-visible kennen. Häufig sieht man CSS wie dieses:

button:focus {
    outline: none;
}

Das solltest du vermeiden. Der sichtbare Fokus ist wichtig für Menschen, die eine Oberfläche mit der Tastatur bedienen.

Wenn du den Fokus gezielt gestalten möchtest, kannst du stattdessen schreiben:

button:focus-visible {
    outline: 2px solid currentColor;
}

Der Browser entscheidet dabei anhand der Eingabemethode, wann die sichtbare Hervorhebung sinnvoll ist.

Und noch eine Eigenschaft, die bei Formularen angenehm sein kann:

form {
    accent-color: #3366cc;
}

Damit kannst du unter anderem die Akzentfarbe von Checkboxen und Radio Buttons an dein Design anpassen, ohne diese Elemente komplett selbst nachbauen zu müssen.

Das sind keine spektakulären CSS Tricks. Aber genau deshalb sind sie nützlich. Sie ersetzen keine Grundlagen, sondern machen normale Grundlagen angenehmer.

Fazit: Gutes CSS muss nicht kompliziert sein

Bei CSS entsteht schnell der Eindruck, man müsse irgendwann besonders ausgefallene Selektoren, Animationen oder komplexe Grid Layouts beherrschen, um wirklich gut damit arbeiten zu können.

Im normalen Entwickleralltag bringen dir oft ganz andere Dinge mehr.

Wenn du weißt, dass padding: 10px 20px vier einzelne Properties ersetzen kann, dass gap Abstände zwischen Flex Elementen übernimmt oder dass border-box dir Größenberechnungen erspart, hast du davon wahrscheinlich deutlich häufiger etwas als von irgendeinem spektakulären CSS Effekt.

Dasselbe gilt für margin-left: auto, currentColor, aspect-ratio, object-fit, overflow-wrap oder :focus-visible. Keine dieser Funktionen ist kompliziert. Man muss nur wissen, dass sie existiert.

Und genau darin liegt bei CSS häufig der Unterschied zwischen einer Lösung, die irgendwie funktioniert, und einer Lösung, die angenehm zu warten ist.

Wenn du bei einer CSS Regel das Gefühl hast, dass du gerade sehr viel Code für etwas eigentlich Einfaches schreibst, lohnt sich deshalb ein kurzer Blick in die Dokumentation. CSS kann inzwischen erstaunlich viele Dinge direkt, für die man früher zusätzliche Elemente, Sonderklassen oder mehrere einzelne Regeln benötigt hat.

Du musst nicht jede Eigenschaft auswendig kennen. Das schafft ohnehin niemand. Viel wichtiger ist, nach und nach ein Gefühl dafür zu entwickeln, welche Möglichkeiten CSS dir grundsätzlich bietet.

Denn manchmal ist der beste CSS Trick einfach eine Zeile, von der du bisher nicht wusstest, dass es sie gibt.