Dokumentacja CSS z przykładami: Komentarze

Q: Jak pisać komentarze w CSS?

Umieść tekst między / i /: / This is a comment /. Ta sama składnia działa dla jednej linii i wielu, wszędzie tam, gdzie w arkuszu stylów dozwolone są białe znaki.

Q: Czy można używać // do komentarzy w CSS?

Nie. CSS nie ma komentarza jednoliniowego. // jest odczytywane jako część następnego selektora albo deklaracji, co czyni je niepoprawnymi, więc przeglądarka odrzuca całą regułę albo deklarację. Sass, Less i podobne preprocesory akceptują //, ale zwykły CSS nie.

Q: Czy komentarze CSS można zagnieżdżać?

Nie. Komentarz kończy się na pierwszym /, więc / a / b / c / kończy się po b, a pozostałe c / staje się śmieciem, który psuje następną regułę.

Q: Jaki jest skrót do komentowania w CSS?

W większości edytorów kodu, w tym w VS Code, Ctrl + / w Windows i Linuksie albo Cmd + / w macOS otacza zaznaczone linie znakami / /, a ponowne naciśnięcie usuwa komentarz.

Komentarze w CSS: składnia i jak komentować

CSS ma jedną składnię komentarzy, /* ... */, dla jednej i wielu linii. Dowiedz się, gdzie można umieszczać komentarze, jak zakomentować regułę i dlaczego // oraz zagnieżdżone komentarze po cichu psują następną regułę.

Na tej stronie są działające edytory: edytuj, uruchamiaj i od razu zobacz wynik.

Autor: Kevin Spektor, Współzałożyciel i CTO

Opublikowano Sep 24, 2026

Jak napisać komentarz CSS

Komentarz CSS zaczyna się od /* i kończy na */. Przeglądarka ignoruje wszystko pomiędzy, czy to jedna linia, czy dwadzieścia.

<!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>

Istnieje tylko ta jedna składnia. CSS nie ma osobnego komentarza jednoliniowego.

Gdzie można umieszczać komentarze

Komentarz może stać wszędzie tam, gdzie dozwolone są białe znaki: między regułami, między deklaracjami, po wartości, w liście selektorów. Działa tak samo w pliku .css, w elemencie <style> i w atrybucie style.

/* 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>

Komentarze HTML, , służą do znaczników, a nie do CSS. Obie składnie zestawia strona o komentarzach w HTML.

Zakomentowanie kodu

Na co dzień komentarzy używa się do wyłączenia deklaracji, żeby sprawdzić, co robi, bez jej usuwania. Otocz ją znakami /* */:

<!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>

Usuń /* i */ wokół linii z obramowaniem, a pojawi się bursztynowe obramowanie. Zakomentowanie całej reguły działa tak samo: wstaw /* przed selektorem i */ po nawiasie zamykającym.

Większość edytorów robi to za ciebie: zaznacz linie i naciśnij Ctrl + / (Cmd + / w macOS).

Dlaczego // psuje CSS

// wygląda jak komentarz, bo jest nim w JavaScripcie, Sassie i Lessie. W CSS to po prostu dwa znaki, które stają się częścią tego, co następuje po nich. Przeglądarka widzi wtedy niepoprawny selektor i odrzuca całą następną regułę bez żadnego komunikatu o błędzie.

<!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>

Przeglądarka odczytała // this is NOT a comment .one jako jeden selektor, który jest niepoprawny, więc cała reguła .one została odrzucona. Zmień tę linię na /* this is a comment */, a zielone tło wróci.

Komentarzy nie można zagnieżdżać

Komentarz kończy się na pierwszym */. Otoczenie kodu, który już zawiera komentarz, kończy zewnętrzny komentarz za wcześnie:

<!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>

Żeby zakomentować blok zawierający komentarze, najpierw usuń albo skróć te wewnętrzne.

Porządkowanie arkusza stylów komentarzami

Długie arkusze stylów czyta się lepiej z nagłówkami sekcji. Popularna konwencja:

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

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

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

.header { padding: 16px; }

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

Komentarze trafiają do każdego odwiedzającego jako część pliku i widać je w podglądzie źródła, więc nigdy nie umieszczaj w nich haseł, wewnętrznych adresów URL ani notatek, których nie chcesz publikować.

Częste błędy

Używanie //. Po cichu usuwa następną regułę. Użyj /* */.
Zagnieżdżanie komentarzy. Pierwsze */ kończy komentarz; reszta psuje następną regułę.
Brak zamykającego */. Wszystko po /*, aż do końca arkusza stylów, staje się komentarzem.
Używanie  w CSS. To składnia komentarzy HTML i nie zakomentowuje CSS.
Sekrety w komentarzach. Trafiają do przeglądarki razem z arkuszem stylów.

Najczęściej zadawane pytania

Jak pisać komentarze w CSS?

Umieść tekst między /* i */: /* This is a comment */. Ta sama składnia działa dla jednej linii i wielu, wszędzie tam, gdzie w arkuszu stylów dozwolone są białe znaki.

Czy można używać // do komentarzy w CSS?

Nie. CSS nie ma komentarza jednoliniowego. // jest odczytywane jako część następnego selektora albo deklaracji, co czyni je niepoprawnymi, więc przeglądarka odrzuca całą regułę albo deklarację. Sass, Less i podobne preprocesory akceptują //, ale zwykły CSS nie.

Czy komentarze CSS można zagnieżdżać?

Nie. Komentarz kończy się na pierwszym */, więc /* a /* b */ c */ kończy się po b, a pozostałe c */ staje się śmieciem, który psuje następną regułę.

Jaki jest skrót do komentowania w CSS?

W większości edytorów kodu, w tym w VS Code, Ctrl + / w Windows i Linuksie albo Cmd + / w macOS otacza zaznaczone linie znakami /* */, a ponowne naciśnięcie usuwa komentarz.

Czy komentarze CSS wpływają na wydajność?

Tylko dodając bajty do pliku. Przeglądarka odrzuca je podczas parsowania. Narzędzia do budowania minifikują arkusze stylów i usuwają komentarze; wiele z nich zachowuje komentarze zaczynające się od /*!, co jest konwencją dla informacji o licencji.

Powiązane zagadnienia