6.2.6 Gruppierung

Haben wir mehreren HTML-Elementen eine gleiche Formatierung zugewiesen, so können wir diese gruppieren. Unser Stylesheet wird dadurch übersichtlicher, da die zusammengefassten Eigenschaften (selbst wenn es nur eine einzelne ist) für die ganze Gruppe der Element-Selektoren gelten.

Das bedeutet: Haben mehrere CSS-Selektoren gleiche Eigenschaften, so können wir all diese Eigenschaften zwischen geschweifte Klammern schreiben und alle beteiligten Selektoren, mit einem Komma voneinander getrennt, davorstellen:

1
2
3
p, div, li {
  font-weight: bold;
}

Alle Schriftteile innerhalb der p-, div- oder li-Elemente haben nun die Eigenschaft „bold“ (dt. "fett") zugewiesen bekommen. Es können einzelnen Elementen auch weitere Eigenschaften zugewiesen werden, ohne dass die Gruppierung beeinträchtigt wird.

1
2
3
4
5
6
7
p, div, li {
  font-weight: bold;
}

p {
  font-size: 18px; /* Zusätzlich für das p-Element */
}

Vorteile der Gruppierung

  • Übersichtlichkeit: Gruppierungen reduzieren Wiederholungen und machen das Stylesheet kompakter und einfacher lesbar.

  • Wartbarkeit: Änderungen an gemeinsamen Eigenschaften müssen nur an einer Stelle vorgenommen werden, was die Fehleranfälligkeit reduziert.

  • Konsistenz: Gleiche Eigenschaften für mehrere Selektoren sorgen für ein einheitliches Design.


Aufgabe Gruppieren

Wir haben mehrere Selektoren, die alle mindestens eine gleiche Eigenschaft besitzen. Diese können wir durch Gruppierungen vereinfachen.

h1 {
  color: #ff00ff;
  font-family: Helvetica, sans-serif;
}

h2 {
  color: #ff00ff;
  font-family: Helvetica, sans-serif;
}

p {
  color: #ff00ff;
  font-family: Helvetica, sans-serif;
  margin-left: 15px;
  border-bottom: 1px solid #000000;
}
Kürzen Sie die 14-Zeilen auf die kleinstmögliche Zeilengröße!

Lösung

Durch Gruppierungen wird aus dem ursprünglichen 14-Zeiler ein kurzer 8-Zeiler. Dennoch bleiben alle weiteren Eigenschaften der einzelnen Selektoren erhalten.

1
2
3
4
5
6
7
8
9
h1, h2, p {
  color: #ff00ff;
  font-family: Helvetica, sans-serif;
}

p {
  margin-left: 15px;
  border-bottom: 1px solid #000000;
}

Beispiel: Layout und Typografie

Gruppierungen sind besonders hilfreich, wenn wir ähnliche Stile für Layout- oder Typografie-Elemente definieren möchten.

1
2
3
4
5
6
7
8
9
h1, h2, h3 {
  font-family: Arial, sans-serif;
  color: #333;
}

ul, ol {
  margin-left: 20px;
  padding-left: 10px;
}

In diesem Beispiel definieren wir eine einheitliche Schriftart für alle Überschriften (h1, h2, h3) sowie ein gemeinsames Layout für ungeordnete (ul) und geordnete Listen (ol).


Best Practices für Gruppierungen

  1. Keine übermäßig langen Gruppierungen. Zu viele Selektoren in einer Gruppe können die Lesbarkeit erschweren. Gruppieren Sie daher nur, wenn es sinnvoll ist.

  2. Klarheit und Struktur. Gruppierungen sollten logisch zusammenpassen, z. B. alle Listen-Elemente oder alle Überschriften.

Durch die gezielte Nutzung von Gruppierungen gestalten wir unser Stylesheet effizient und übersichtlich. Gruppierungen sparen nicht nur Zeit bei der Entwicklung, sondern erleichtern auch die spätere Wartung und Erweiterung. Damit schaffen wir die Grundlage für konsistente und gut strukturierte CSS-Dateien.

Typisches Beispiel für Gruppierungen

Hier ein typisches Beispiel einer CSS-Datei. Wir können die unterschiedlichen Gruppierungen und auch den generellen Aufbau vom "header" zum "footer" gut erkennen.

header, nav, footer {
  background-color: #f4f4f4;
  color: #333;
  font-family: Arial, sans-serif;
  text-align: center;
  padding: 15px;
}

header {
  border-bottom: 2px solid #ccc;
}

nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

nav ul li {
  display: inline-block;
  margin: 0 10px;
}

nav ul li a {
  text-decoration: none;
  color: #007bff;
}

main, aside {
  margin: 20px;
  padding: 15px;
}

main {
  background-color: #fff;
  border: 1px solid #ddd;
  flex: 2;
}

aside {
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  flex: 1;
}

footer {
  border-top: 2px solid #ccc;
}

Hier werden schon verschiedene Formatierungen vorweg genommen, die erst auf den nachfolgenden Seiten im Detail erläutert werden. Aber ich wollte Ihnen mal eine typische (wenn auch super kleine) reale CSS-Datei zeigen.