6.2.4 Kommentare im Stylesheet

Wie auch bei HTML können wir ein CSS-Dokument kommentieren und dadurch strukturieren. Kommentare beginnen mit einem Schrägstrich und einem Sternchen und enden mit einem Sternchen und einem Schrägstrich.

/* Dies ist ein Kommentar */

Wir können Kommentare im gesamten Dokument platzieren, um die Übersichtlichkeit zu erhöhen, z. B. um die Strukturierung anzugeben.

body {
  background-color: #dafde2;
  margin-left: 200px;
}

/* === Überschriften === */
h1 {
  font-style: italic;
  color: blue;
}

/*
Kommentare können überall sein, 
auch dann, wenn sie mehrzeilig sind
*/

p {
  font-weight: bold;
}

Kommentare sind Pflicht!

Kommentare sind Pflicht, auch wenn wir ein Dokument für uns selbst erstellen. Wenn wir es uns nach einem Jahr noch einmal ansehen, werden wir es ohne Kommentare nur noch schwer nachvollziehen können.


Was sollte kommentiert werden?

  1. Struktur und Abschnitte

    • Wir sollten Kommentare nutzen, um den Aufbau des Stylesheets klar zu kennzeichnen, z. B. mit Überschriften wie /* === Layout === */ oder /* === Typografie === */.

    • Diese helfen uns, schnell den richtigen Bereich im Stylesheet zu finden.

  2. Komplexe oder ungewöhnliche Logik

    • Wenn wir spezifische Anpassungen vorgenommen haben, die nicht selbsterklärend sind, sollten wir den Grund dokumentieren.

      1
      2
      3
      4
      5
      6
      /* Verwendet, um den Bug im Safari-Browser zu umgehen */
      @supports (-webkit-touch-callout: none) {
          body {
          overflow: hidden;
          }
      }
      
  3. Farbschemata oder Designentscheidungen

    • Dokumentieren wir globale Designvorgaben wie Hauptfarben oder Schriftarten, damit diese leicht erkennbar sind.

      1
      2
      3
      4
      5
      /* Primärfarben für das Branding */
      :root {
          --primary-color: #0056b3;
          --secondary-color: #ffc107;
      }
      
  4. Externe Abhängigkeiten oder Frameworks

    • Bitte unbedingt kommentieren, wenn Styles aus externen Frameworks wie Bootstrap oder Tailwind überschreiben werden, damit später klar ist, woher die ursprünglichen Regeln stammen.

      1
      2
      3
      4
      /* Überschreibt Bootstrap's Standard-Abstände */
      .container {
          padding: 20px;
      }
      

Offensichtliche Anweisungen sollten nicht kommentiert werden!

- Bitte keine Kommentare, die den Code unnötig aufblähen und bereits durch die CSS-Regeln klar sind.

    ```css linenums="1"
    /* Setzt die Schriftgröße auf 16px */
    p {
        font-size: 16px;
    }
    ```

Eigenschaften guter Kommentare

  • Klarheit: Kommentare sollten prägnant und verständlich sein.
  • Relevanz: Wir kommentieren nur das, was für das Verständnis oder die spätere Bearbeitung wirklich notwendig ist.
  • Konsistenz: Verwenden wir eine einheitliche Syntax und Struktur für Kommentare, damit unser Code leicht nachvollziehbar bleibt.
  • Aktualität: Kommentare müssen mit dem Code übereinstimmen. Veraltete oder falsche Kommentare können mehr schaden als nützen.

Durch gezielte und sinnvolle Kommentare verbessern wir nicht nur die Übersichtlichkeit unseres Codes, sondern schaffen auch eine Grundlage für effektive Zusammenarbeit im Team und einfache Wartbarkeit unserer Projekte.