Ausführbare CSS-Docs: CSS Kommentare

Q: Wie schreibt man einen Kommentar in CSS?

Setz den Text zwischen / und /: / Das ist ein Kommentar /. Dieselbe Syntax funktioniert für eine oder viele Zeilen, überall dort, wo in einem Stylesheet Leerraum erlaubt ist.

Q: Kann man // für Kommentare in CSS verwenden?

Nein. CSS hat keinen einzeiligen Kommentar. // wird als Teil des nächsten Selektors oder der nächsten Deklaration gelesen, was sie ungültig macht, also verwirft der Browser die ganze Regel oder Deklaration. Sass, Less und ähnliche Präprozessoren akzeptieren //, reines CSS nicht.

Q: Kann man CSS-Kommentare verschachteln?

Nein. Ein Kommentar endet beim ersten /, also endet / a / b / c / nach b, und das übrig gebliebene c / wird zu Müll, der die folgende Regel kaputt macht.

Q: Was ist der Shortcut zum Kommentieren in CSS?

In den meisten Code-Editoren, auch in VS Code, setzt Ctrl + / unter Windows und Linux oder Cmd + / unter macOS die markierten Zeilen in / /, und ein zweiter Druck entfernt den Kommentar wieder.

CSS Kommentare: So kommentierst du in CSS

CSS hat genau eine Kommentar-Syntax, /* ... */, für eine und für mehrere Zeilen. Hier lernst du, wo Kommentare stehen dürfen, wie du eine Regel auskommentierst und warum // und verschachtelte Kommentare stillschweigend die nächste Regel kaputt machen.

Diese Seite enthält ausführbare Editoren - bearbeiten, ausführen und Ausgabe sofort sehen.

Von Kevin Spektor, Co-founder & CTO

Veröffentlicht am Sep 24, 2026

So schreibst du einen CSS-Kommentar

Ein CSS-Kommentar beginnt mit /* und endet mit */. Alles dazwischen ignoriert der Browser, egal ob es eine Zeile umfasst oder zwanzig.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Comments</title>
  <style>
    /* Single-line comment */
    .note {
      background: #e5e7eb; /* after a declaration */
      padding: 8px 12px;
    }

    /*
      Multi-line comment:
      the same syntax, spread over several lines.
    */
    .note strong {
      color: #2563eb;
    }
  </style>
</head>
<body>
  <p class="note">The comments change <strong>nothing</strong> on screen.</p>
</body>
</html>

Es gibt nur diese eine Syntax. CSS hat keinen eigenen einzeiligen Kommentar.

Wo Kommentare stehen dürfen

Ein Kommentar darf überall stehen, wo Leerraum erlaubt ist: zwischen Regeln, zwischen Deklarationen, nach einem Wert, innerhalb einer Selektorliste. Er funktioniert genauso in einer .css-Datei, in einem <style>-Element und in einem style-Attribut.

/* Buttons */
.btn,          /* default */
.btn-primary { /* variant */
  padding: 8px 14px; /* 8px top and bottom, 14px sides */
}

<p style="color: #16a34a; /* inline comments work too */">Hello</p>

HTML-Kommentare, , sind für Markup gedacht, nicht für CSS. Beide Syntaxen stehen nebeneinander auf der Seite zu HTML-Kommentaren.

Code auskommentieren

Im Alltag nutzt du Kommentare vor allem, um eine Deklaration abzuschalten und zu sehen, was sie bewirkt, ohne sie zu löschen. Setz sie in /* */:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Comment out</title>
  <style>
    .box {
      background: #2563eb;
      color: white;
      padding: 16px;
      /* border: 6px solid #f59e0b; */
      /* border-radius: 12px; */
    }
  </style>
</head>
<body>
  <div class="box">Border and radius are commented out.</div>
</body>
</html>

Lösch das /* und */ um die border-Zeile, und der bernsteinfarbene Rahmen erscheint. Eine ganze Regel kommentierst du genauso aus: /* vor den Selektor und */ hinter die schließende Klammer.

Die meisten Editoren erledigen das für dich: Zeilen markieren und Ctrl + / drücken (Cmd + / unter macOS).

Warum // dein CSS kaputt macht

// sieht wie ein Kommentar aus, weil es in JavaScript, Sass und Less einer ist. In CSS sind es nur zwei Zeichen, und sie werden Teil dessen, was folgt. Der Browser sieht dann einen ungültigen Selektor und verwirft die gesamte nächste Regel, ohne Fehlermeldung.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Double slash</title>
  <style>
    p { padding: 6px 10px; }

    // this is NOT a comment
    .one { background: #16a34a; color: white; }

    .two { background: #2563eb; color: white; }
  </style>
</head>
<body>
  <p class="one">.one has no background: its rule was dropped.</p>
  <p class="two">.two is fine.</p>
</body>
</html>

Der Browser hat // this is NOT a comment .one als einen einzigen Selektor gelesen, der ungültig ist, also wurde die ganze .one-Regel verworfen. Ändere die Zeile in /* this is a comment */, und der grüne Hintergrund ist wieder da.

Kommentare lassen sich nicht verschachteln

Ein Kommentar endet beim ersten */. Wenn du Code einschließt, der schon einen Kommentar enthält, endet dein äußerer Kommentar zu früh:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Nested</title>
  <style>
    p { padding: 6px 10px; }

    /* outer start
    .old { color: red; } /* inner comment */
    outer end */

    .next { background: #f59e0b; }
    .last { background: #e5e7eb; }
  </style>
</head>
<body>
  <p class="next">.next is broken by the leftover "outer end */".</p>
  <p class="last">.last still works.</p>
</body>
</html>

Um einen Block auszukommentieren, der Kommentare enthält, entferne oder kürze zuerst die inneren.

Ein Stylesheet mit Kommentaren gliedern

Lange Stylesheets lesen sich mit Abschnittsüberschriften besser. Eine verbreitete Konvention:

/* ==========================================
   Layout
   ========================================== */

.page { max-width: 960px; margin: 0 auto; }

/* ------------------------------------------
   Header
   ------------------------------------------ */

.header { padding: 16px; }

/*! License: MIT (many minifiers keep comments that start with "!") */

Kommentare gehen als Teil der Datei an jeden Besucher und sind im Quelltext sichtbar. Schreib also nie Passwörter, interne URLs oder Notizen hinein, die du nicht veröffentlichen würdest.

Häufige Fehler

// verwenden. Es löscht stillschweigend die nächste Regel. Nimm /* */.
Kommentare verschachteln. Das erste */ beendet den Kommentar; der Rest macht die nächste Regel kaputt.
Das schließende */ vergessen. Alles nach dem /* bis zum Ende des Stylesheets wird zum Kommentar.
 in CSS verwenden. Das ist die Kommentar-Syntax von HTML und kommentiert kein CSS aus.
Geheimnisse in Kommentaren lassen. Sie gehen mit dem Stylesheet an den Browser.

Häufig gestellte Fragen

Wie schreibt man einen Kommentar in CSS?

Setz den Text zwischen /* und */: /* Das ist ein Kommentar */. Dieselbe Syntax funktioniert für eine oder viele Zeilen, überall dort, wo in einem Stylesheet Leerraum erlaubt ist.

Kann man // für Kommentare in CSS verwenden?

Nein. CSS hat keinen einzeiligen Kommentar. // wird als Teil des nächsten Selektors oder der nächsten Deklaration gelesen, was sie ungültig macht, also verwirft der Browser die ganze Regel oder Deklaration. Sass, Less und ähnliche Präprozessoren akzeptieren //, reines CSS nicht.

Kann man CSS-Kommentare verschachteln?

Nein. Ein Kommentar endet beim ersten */, also endet /* a /* b */ c */ nach b, und das übrig gebliebene c */ wird zu Müll, der die folgende Regel kaputt macht.

Was ist der Shortcut zum Kommentieren in CSS?

In den meisten Code-Editoren, auch in VS Code, setzt Ctrl + / unter Windows und Linux oder Cmd + / unter macOS die markierten Zeilen in /* */, und ein zweiter Druck entfernt den Kommentar wieder.

Beeinflussen CSS-Kommentare die Performance?

Nur dadurch, dass sie die Datei um ein paar Bytes größer machen. Der Browser verwirft sie beim Parsen. Build-Tools minifizieren Stylesheets und entfernen Kommentare; viele behalten Kommentare, die mit /*! beginnen, weil das die Konvention für Lizenzhinweise ist.

Verwandte Konzepte