CSS optimieren und vereinfachen

Unübersichtliches CSS

CSS-Regeln für eine komplexe Webseite werden schnell lang und unübersichtlich. CSS unterstützt Kurzschreibweisen – Shorthands – und weist mehreren Elementen gleichzeitig Eigenschaften zu, damit das Stylesheet kurz und besser lesbar bleibt.

CSS Kurzschrift

Die bekannteste CSS-Kurzform ist font, in der Schrifttyp, Schriftgröße, Schriftschnitt und Zeilenhöhe in einer CSS-Regel notiert werden.

p { font-family: Verdana, Arial, sans-serif; 
    font-weight: italic;
    line-height: 16px;
    font-size: 12px;
    color: gray
}

 ┌─── CSS-Selektor
 │
 p { font: italic 12px/16px Verdana, Arial, sans-serif; color: gray; }
      ▲      ▲    ▲     ▲     ▲       ▲       ▲            
      │      │    │     │     │       │       └── generelle Schriftart
      │      │    │     │     │       │
      │      │    │     │     │       └─── Alternative Schriftfamilie
      │      │    │     │     │ 
      │      │    │     │     └─── Bevorzugte Schrift für die Webseite
      │      │    │     │
      │      │    │     └─── Zeilenhöhe
      │      │    │
      │      │    └─── Schriftgröße
      │      │
      │      └─── Schriftstil oder Schriftgewicht (bold, italic, normal)
      │
      └─── Kurzschrift für font-family, font-weight, font-style … 

Die Kurzschrift für die Eigenschaften font-family, font-weight, font-size … ist langatmig – aber doch übersichtlicher als das Niederschreiben aller einzelnen Eigenschaften für die Schrift auf der Webseite. Erforderlich sind Schriftgröße/Zeilenabstand in exakt dieser Form mit dem Schrägstrich. Der Zeilenabstand muss immer angegeben werden. Die Angabe italic oder bold ist optional. Die Kurzschrift für font setzt aber nicht die Schriftfarbe.

CSS-Regeln gruppieren

Regelgruppen fassen Selektoren zusammen, für die gemeinsame Eigenschaften gelten. Im Beispiel oben sollen Überschriften h1, h2 und h3 jeweils einen Rahmen unten zeigen. Im zweiten Beispiel gilt die Schriftfamilie für das p-Elemente genauso wie für ul- und ol-Elemente.

h1, h2, h3 { border-bottom: 2px solid gray; }
p, ul, ol { font-family: Georgia, Times, "Times New Roman", serif; }

CSS Regelgruppen halten das Stylesheet ebenfalls kurz, helfen bei der Organisation des Stylesheets und halten Eigenschaften konsistent – kurz: Sie optimieren das CSS.

Mehrere CSS-Klassen

Damit CSS-Eigenschaften nicht in vielen Regeln wiederholt werden müssen, lassen sich mehrere Klassen in ein class-Attribut schreiben.

.green { background-color: green; color: white; }
.large { font-size: 1.1em; line-height: 150%; }

<h2 class="green">Lorem Ipsum</h2>
<p class="green large">Lorem Ipsum</p>

Wenn mehr als eine CSS class für ein Element vorhanden ist, können wir auf Elemente zugreifen, die gleichzeitig in zwei oder mehr CSS Klassen enthalten sind.

Die Klassen werden ohne Leerzeichen aneinander gehangen.

.green.large { background-color: ivory; font-size: 1.2em; }

CSS Variablen

Custom Properties – CSS Variablen – verringern Wiederholungen und bringen Konsistenz ins CSS, sind die Basis für das Festlegen von Farben und Farbnuancen und wirken zusammen mit calc bei der Bestimmung von Breiten.

:root {
	--me-color: hsl(350,50%,50%);
}
…

.box {
	background-color: var(--me-color);
}

Mehrere CSS-Daten und CSS-@import-Regel

CSS in mehrere Datei aufteilen, z.B. CSS für Formulare und andere Elemente, die nicht auf jeder Seite gebraucht werden, in eigene Dateien setzen.

Mittels Media Query z.B. Dateien für mobile Geräte bzw. große Monitore importieren.

@import url("desktop.css") screen and (min-width: 768px);
@import url("mobile.css") screen and (max-width: 767px);

Modulares CSS ist einfacher zu pflegen und erleichtert Änderungen. Gemeinsames CSS (z.B. CSS-Variablen für Typografie und Farben) mit @import-Regel einsetzen. Ansonsten ist der Import von CSS-Dateien in andere CSS-Dateien nicht wirklich empfehlenswert.

CSS IMPORTANT

Damit sich eine Eigenschaft entgegen allen vorangegangenen Regeln durchsetzt, wird sie als !important notiert.

aside li a { color: green !important; }

important ist ein Notausgang, der in nur akuten Problemfällen verwendet wird. Wenn eine CSS-Regel nicht willens ist, ein Element in Form zu bringen, sucht man besser die Ursache.

Spezifität oder Gewicht von CSS-Regeln

Jede CSS-Regel hat ein spezifisches Gewicht (Specificity, Spezifität) und kann wichtiger oder spezifischer sein als andere Regeln oder durch andere Regeln überschrieben werden. Wenn zwei Regeln dasselbe Gewicht haben, setzt sich die zuletzt notierte Regel durch.

So haben zusammengesetzte oder kombinierte Selektoren ein höheres Gewicht als einfache Selektoren:

section h2 { color: green } /** spezifischer **/
h2 { color: red }			/** weniger spezifisch **/

Egal wie mans dreht und wendet, ob section h2 vor oder nach h2 notiert ist: gegen section h2 hat der einfache Selektor h2 keine Chance.

Die einfachste Methode, das Gewicht einer Regel zu berechnen

Das W3C hat eine weitere Methode auf Lager.

1. a = 1 für inline-CSS
2. b = Anzahl der ids
3. c = Zahl der Attribut-Selektoren, Klassen und Pseudo-Klassen
4. d = Zahl der Element- und Pseudo-Element-Namen der Regel

#nav input:not([type="number"])
a=0, b=1, c=1, d=1 -> 0011

.content nav li:last-child
a=0, b=0, c=1, d=3 -> 0013

<p style="color:red">
a=1, b=0, c=0, d=0 -> 1000

<p class="message error">
a=0, b=0, c=2, d=0 -> 0020

<ul ol li class="first">
a=0, b=0, c=2, d=3 -> 0013

CSS Nesting – CSS verschachteln

CSS Nesting ist erst seit Ende 2023 in allen modernen Browsern vertreten. Diese Schreibweise ist eine der größten Erleichterung beim Zusammenstellen komplexer Stylesheets, verringert die Schreibarbeit und verbessert die Lesbarkeit.

& main {
	max-width: 1260px;
	
	& article {
		margin-top: 2rem;
		
		& h2 {
			color: firebrick;
		}
	}
}