Коротко: в CSS комментарии пишут только так: /* текст */. Однострочные // не работают — это ошибка синтаксиса (они допустимы только в препроцессорах). Комментарии помогают помечать секции, пояснять неочевидные решения и временно отключать код.
Синтаксис
| Код | Работает? |
|---|---|
/* комментарий */ |
да, всегда |
// комментарий |
нет (ошибка в чистом CSS) |
<!-- --> |
нет, это HTML |
Вкладки: примеры
.btn {
background: #003F8F; /* акцентный цвет бренда */
}Короткое пояснение рядом со свойством. Уместно для неочевидных значений — например, «магия» из макета.
/*
Карточка товара.
Тень мягкая, чтобы углы не «грязнились»
при большом радиусе.
*/
.card { box-shadow: 0 8px 24px rgba(0,0,0,.1); }Многострочные комментарии — для пояснений и «шапок» блоков. Текст не вкладывается: вложенные /* ломают разбор.
/* ===== 1. Переменные ===== */
:root { --brand: #003F8F; }
/* ===== 2. Базовая типографика ===== */
body { font: 16px/1.6 system-ui, sans-serif; }
/* ===== 3. Компоненты ===== */
.btn { /* ... */ }«Оглавление» файла: помогает ориентироваться в большом наборе стилей. Часто добавляют нумерацию секций.
/* временно отключено
.card { box-shadow: 0 8px 24px rgba(0,0,0,.1); }
*/Комментарием удобно «выключать» правило, пока разбираетесь. Не забывайте убирать такие «заглушки» перед релизом.
/*!. Если комментарий важен (лицензия) — используйте форму с восклицательным знаком.Практика: полезные комментарии
- Держите «шапку» файла: назначение и версия.
- Помечайте секции: переменные, типографика, компоненты, утилиты.
- Поясняйте «странные» значения (подгонка под макет, хак для браузера).
- Не дублируйте код словами — комментируйте смысл, а не синтаксис.
- Удаляйте устаревшие комментарии: неправда в комментарии хуже отсутствия.
/*! Лицензия: © 2026 Мой бренд */Частые ошибки: причина → решение
| Симптом | Причина | Решение |
|---|---|---|
| Стили «сломались» | использован // |
только /* */ |
| Незакрытый комментарий | забыт */ |
проверить пары |
| Комментарий пропал | минификатор удалил | использовать /*! ... */ |
| Вложенные комментарии | в CSS не поддерживаются | объединить в один |
Проверьте себя
Вопросы и ответы
Нет. Если написать /* внешний /* внутренний */ */ — комментарий закроется на первом */, и стили сломаются.
Да, в SCSS/Sass // допустимы, но при компиляции такие комментарии в итоговый CSS не попадают.
Нет, это шум. Комментируйте только неочевидное: почему так, а не что делает строка.
Комментарием с пояснением: для какого браузера/версии и почему нужен обходной путь. Иначе такой код кто-то удалит как «лишний».
Итоги
- Комментарий в CSS — только
/* ... */. - Для лицензий и важного —
/*! ... */. - Помечайте секции и поясняйте неочевидные значения.
- Вложенные комментарии и
//недопустимы в чистом CSS.
Комментарии
Пока комментариев нет — будьте первым, кто поделится мнением.