Как добавить комментарии в CSS-код

Комментарии в css записывают между символами /* и */. Такой текст браузер игнорирует, поэтому вы сможете пояснить стиль или временно отключить правило. Разберем однострочный и многострочный синтаксис, комментирование в css, комментарии в коде, шаблоны секций, вложенность и работу препроцессоров.

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

CSS использует пару символов-ограничителей: /* открывает комментарий, а */ закрывает его. Теги здесь не участвуют.

Однострочный комментарий помещается в конце строки или занимает отдельную строку:

/* красная граница */
div#border_red {
  border: thin solid red;
} /* комментарий в конце строки */

Многострочный комментарий оформляется теми же ограничителями:

/*
  Стили карточки товара.
  Измените отступы перед публикацией.
*/
.card {
  padding: 16px;
}

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

Почему // не работает в чистом CSS

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

Неправильный вариант:

// цвет кнопки
.button {
  color: red;
}

Правильный вариант:

/* цвет кнопки */
.button {
  color: red;
}

Комментирование в CSS

Комментарий помогает временно отключить одно свойство или целое правило. Удалять строку при такой проверке не нужно: уберите ее из работы ограничителями и верните после теста.

Чтобы отключить одно свойство, поставьте комментарий вокруг его строки:

.card {
  /* margin: 20px; */
  padding: 16px;
}

Чтобы отключить целое правило, охватите комментариями селектор и его блок:

/*
.notice {
  background: yellow;
  color: black;
}
*/

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

После временного отключения откройте страницу и посмотрите на результат: пропавший отступ, цвет или блок покажет, какое правило влияло на оформление. Чтобы вернуть стиль, удалите ограничители или снова примените сочетание клавиш.

Вложенные комментарии в CSS

CSS не поддерживает вложенность комментариев. Первый символ */ закрывает комментарий, даже если он относится к внутреннему пояснению.

/* внешний комментарий
  /* внутренний комментарий */
  .card {
    color: red;
  }
*/

В этом примере внешний комментарий закрывается после слов «внутренний комментарий». Текст .card и последний */ остаются за пределами правильной пары, поэтому код ломается.

Для временного отключения блока удалите внутренний комментарий или замените его обычным текстом:

/*
  Здесь отключен весь блок карточки.
  .card {
    color: red;
  }
*/

Разделение на секции

Длинный CSS-файл проще читать, если вы делите его на нумерованные секции. Одинаковый формат помогает команде быстро найти нужную группу правил.

Оглавление в начале файла можно оформить так:

/*
  ОГЛАВЛЕНИЕ
  1. Базовые стили
  2. Сетка
  3. Компоненты
  4. Служебные классы
*/

Шаблон разделителя с номером:

/*==================== 1. БАЗОВЫЕ СТИЛИ ==================== */

/*==================== 2. СЕТКА ==================== */

Шаблон для секции с коротким пояснением:

/*------------------------------------------------------------
  3. КОМПОНЕНТЫ
  Кнопки, карточки и уведомления
------------------------------------------------------------*/

В начале файла можно оставить шапку с автором и правами:

/*
  Проект: каталог товаров
  Автор: команда интерфейса
  Авторские права: © команда проекта
*/

Советы по оформлению комментариев

• Пишите причину. Комментарий объясняет ограничение, решение или связь стилей с компонентом.
• Комментарии в CSS-файле и внутри тега <style>. Синтаксис /* */ работает в обоих местах.
• Не путайте CSS и HTML. В HTML применяют <!-- комментарий -->, но такой синтаксис не подходит для CSS.
• Сохраняйте единый формат. Нумерация и одинаковые разделители ускоряют поиск секции.
• Удаляйте устаревшие пояснения. Комментарий с неверной причиной мешает поддержке сильнее, чем отсутствие пояснения.

Комментарии в Sass, SCSS и LESS

Препроцессоры Sass, SCSS и LESS поддерживают два вида комментариев. Запись // остается только в исходнике и не попадает в итоговый CSS.

// комментарий Sass, SCSS или LESS
.button {
  color: red;
}

Запись /* */ обычно переносится в итоговый CSS. При сжатии вывода препроцессор может удалить такой комментарий, а специальная форма /*! */ предназначена для сохранения важных примечаний, например лицензий.

/*! Лицензия компонента */
.button {
  color: red;
}

Эффективность комментариев

Комментарии увеличивают размер исходного CSS-файла, но браузер не применяет их как стили. Минификаторы, включая cssnano и инструменты внутри сборщиков, удаляют обычные комментарии из продакшен-файла.

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