Verwendung des class-Attributs in HTML

Das class-Attribut erlaubt es, HTML-Elemente zu gruppieren und ihnen bestimmte Stile oder Funktionen zuzuweisen. Es ist unerlässlich für die effektive Nutzung von CSS und JavaScript.

Was ist das class-Attribut?

Eine class ist ein Name, den du einem Element zuweist. Basierend auf diesem Namen kann das Element mit einem oder mehreren Stilen oder Funktionen verbunden werden. Du kannst ihn in deinem CSS- oder JavaScript-Code verwenden.

<p class="highlight">This is a highlighted paragraph.</p>

class bei mehreren Elementen anwenden

Mit dem class-Attribut kannst du mehreren ähnlichen Elementen denselben Stil oder dasselbe Verhalten zuweisen – z. B., um mehreren Boxen das gleiche Aussehen zu geben.

<div class="card">
  <h2 class="card-title">Product Title</h2>
  <p class="card-description">Short product description.</p>
</div>

Mehrere Klassen bei einem Element verwenden

Du kannst einem HTML-Element mehrere Klassen zuweisen, indem du sie mit Leerzeichen trennst. So kann ein Absatz z. B. gleichzeitig rot und fett dargestellt werden.

<p class="text-bold text-red">Important message</p>

Wiederverwendbarkeit

Das class-Attribut ist wiederverwendbar – du kannst es auf viele Elemente anwenden, ohne Stile manuell zu wiederholen. Das macht deinen Code effizienter und konsistenter.

Klassennamen vergeben

Verwende sinnvolle, klare Namen für Klassen, wie .nav-bar oder .card-title. Vermeide vage oder zu allgemeine Namen.

<div class="navigation-bar">
  <a class="nav-item" href="#">Home</a>
  <a class="nav-item" href="#">About</a>
</div>

Verbindung zwischen class und CSS

Der Hauptzweck des class-Attributs ist es, HTML mit CSS zu verbinden. Wenn ein Klassenname mit einem im CSS definierten übereinstimmt, übernimmt das Element automatisch die dort definierten Stile.

<style>
  .highlight {
    background-color: yellow;
    font-weight: bold;
  }
</style>

<p class="highlight">This paragraph is styled using a class.</p>

Mehrere Klassen kombinieren

Wenn du einem Element mehrere Klassen zuweist, übernimmt es die Stile aller Klassen. Zum Beispiel kann ein Button groß, bunt und umrandet sein – jede Klasse fügt eine Stilregel hinzu.

<style>
  .btn {
    padding: 10px;
  }
  .btn-primary {
    background-color: blue;
    color: white;
  }
</style>

<button class="btn btn-primary">Click me</button>

BEM-Namenskonvention

BEM (Block Element Modifier) ist eine beliebte Namenskonvention für Klassennamen, die Klarheit und Wiederverwendbarkeit fördert. Beispiel: card__title oder card--featured. Doppelte Unterstriche stehen für Elemente, doppelte Bindestriche für Modifikatoren.

<div class="card card--featured">
  <h2 class="card__title">Article Title</h2>
  <p class="card__text">Some text here.</p>
</div>

Tipps zur Verwendung von class

Vermeide zu lange oder verwirrende Klassennamen. Verwende eine einheitliche Schreibweise (z. B. kebab-case) und keine CSS-Schlüsselwörter. Denke an Wiederverwendbarkeit – eine gut benannte Klasse kann in vielen Komponenten verwendet werden.

class dynamisch mit JavaScript ändern

Du kannst das class-Attribut mit JavaScript ändern. Das classList-Objekt erlaubt es dir, Klassen dynamisch hinzuzufügen, zu entfernen oder zu überprüfen.

<script>
  document.querySelector("p").classList.add("new-style");
</script>