Исполняемые доки CSS: Комментарии CSS

Q: Как написать комментарий в CSS?

Оберните текст в / и /: / This is a comment /. Тот же синтаксис работает для одной строки и для многих, в любом месте таблицы стилей, где допустим пробел.

Q: Можно ли использовать // для комментариев в CSS?

Нет. В CSS нет однострочного комментария. // читается как часть следующего селектора или объявления, делает его невалидным, и браузер отбрасывает все правило или объявление целиком. Sass, Less и похожие препроцессоры принимают //, а обычный CSS нет.

Q: Можно ли вкладывать комментарии CSS?

Нет. Комментарий заканчивается на первом /, поэтому / a / b / c / заканчивается после b, а оставшийся c / превращается в мусор, который ломает следующее правило.

Q: Какая горячая клавиша комментирует код в CSS?

В большинстве редакторов кода, включая VS Code, Ctrl + / в Windows и Linux или Cmd + / в macOS оборачивает выделенные строки в / /, а повторное нажатие убирает комментарий.

Комментарии в CSS: синтаксис и как закомментировать код

В CSS один синтаксис комментариев, /* ... */, и для одной строки, и для нескольких. Разберем, где можно писать комментарии, как закомментировать правило и почему // и вложенные комментарии незаметно ломают следующее правило.

На этой странице есть исполняемые редакторы: меняйте, запускайте и сразу видите результат.

Автор Kevin Spektor, Co-founder & CTO

Опубликовано Sep 24, 2026

Как написать комментарий в CSS

Комментарий в CSS начинается с /* и заканчивается */. Браузер игнорирует все между ними, занимает ли комментарий одну строку или двадцать.

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

Других вариантов нет. Отдельного однострочного комментария в CSS не существует.

Где можно писать комментарии

Комментарий можно поставить везде, где допустим пробел: между правилами, между объявлениями, после значения, внутри списка селекторов. Он одинаково работает в файле .css, в элементе <style> и в атрибуте 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>

HTML-комментарии, , предназначены для разметки, а не для CSS. Оба синтаксиса рядом разобраны на странице про комментарии в HTML.

Как закомментировать код

Повседневное применение комментариев: отключить объявление, чтобы увидеть, что оно делает, не удаляя его. Оберните его в /* */:

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

Удалите /* и */ вокруг строки с border, и появится янтарная рамка. Целое правило комментируется так же: /* перед селектором и */ после закрывающей скобки.

Большинство редакторов делают это за вас: выделите строки и нажмите Ctrl + / (Cmd + / в macOS).

Почему // ломает CSS

// похож на комментарий, потому что в JavaScript, Sass и Less это комментарий. В CSS это просто два символа, и они становятся частью того, что идет следом. Браузер видит невалидный селектор и отбрасывает все следующее правило, без сообщения об ошибке.

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

Браузер прочитал // this is NOT a comment .one как один селектор, невалидный, поэтому все правило .one было выброшено. Замените строку на /* this is a comment */, и зеленый фон вернется.

Комментарии не вкладываются

Комментарий заканчивается на первом */. Если обернуть код, в котором уже есть комментарий, внешний комментарий закончится раньше времени:

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

Чтобы закомментировать блок с комментариями внутри, сначала удалите или сократите внутренние.

Как организовать таблицу стилей комментариями

Длинные таблицы стилей легче читать с заголовками разделов. Распространенное соглашение:

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

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

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

.header { padding: 16px; }

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

Комментарии уходят каждому посетителю вместе с файлом и видны в исходном коде страницы, поэтому никогда не пишите в них пароли, внутренние URL и заметки, которые не стали бы публиковать.

Частые ошибки

// вместо комментария. Он незаметно удаляет следующее правило. Используйте /* */.
Вложенные комментарии. Первый */ завершает комментарий, остаток ломает следующее правило.
Забытый закрывающий */. Все после /* до конца таблицы стилей становится комментарием.
 внутри CSS. Это синтаксис HTML-комментария, CSS он не комментирует.
Секреты в комментариях. Они попадают в браузер вместе с таблицей стилей.

Часто задаваемые вопросы

Как написать комментарий в CSS?

Оберните текст в /* и */: /* This is a comment */. Тот же синтаксис работает для одной строки и для многих, в любом месте таблицы стилей, где допустим пробел.

Можно ли использовать // для комментариев в CSS?

Нет. В CSS нет однострочного комментария. // читается как часть следующего селектора или объявления, делает его невалидным, и браузер отбрасывает все правило или объявление целиком. Sass, Less и похожие препроцессоры принимают //, а обычный CSS нет.

Можно ли вкладывать комментарии CSS?

Нет. Комментарий заканчивается на первом */, поэтому /* a /* b */ c */ заканчивается после b, а оставшийся c */ превращается в мусор, который ломает следующее правило.

Какая горячая клавиша комментирует код в CSS?

В большинстве редакторов кода, включая VS Code, Ctrl + / в Windows и Linux или Cmd + / в macOS оборачивает выделенные строки в /* */, а повторное нажатие убирает комментарий.

Влияют ли комментарии CSS на производительность?

Только тем, что добавляют байты в файл. Браузер отбрасывает их при разборе. Инструменты сборки минифицируют таблицы стилей и удаляют комментарии; многие сохраняют комментарии, начинающиеся с /*!, это соглашение для лицензионных уведомлений.

Связанные концепции