CSS: комментарии

Комментарии в CSS — текст, игнорируемый браузером, используемый для документирования, структурирования и временного отключения стилей.

Зачем нужно

Комментарии помогают ориентироваться в больших CSS-файлах, документировать неочевидные решения, временно отключать стили при отладке. В CSS есть только один синтаксис комментариев, в отличие от JavaScript — это важно помнить при переходе между языками.

Где используется

  • Разделение CSS-файла на секции
  • Документирование хаков и обходных решений
  • Временное отключение блоков стилей
  • Объяснение магических чисел и z-index значений

Основной контент

Единственный синтаксис

/* Это комментарий */

/* Многострочный
   комментарий */

.selector {
  color: red; /* инлайн-комментарий */
}

В CSS нет однострочных комментариев // — они используются только в SCSS/Sass и не работают в обычном CSS.

Организация файла через комментарии

/* ==========================================================================
   Секция: Базовые стили
   ========================================================================== */

/* Сброс стилей
   -------------------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
}

/* Типографика
   -------------------------------------------------------------------------- */
body {
  font-family: system-ui, sans-serif;
  line-height: 1.5;
}

/* ==========================================================================
   Компоненты
   ========================================================================== */

/* Кнопки */
.btn { /* ... */ }

/* Карточки */
.card { /* ... */ }

Документирование неочевидных решений

.modal {
  position: fixed;
  /* z-index: 1000 — выше header (100) и dropdown (200),
     но ниже toast-уведомлений (1100) */
  z-index: 1000;
}

.image-container {
  /* padding-top: 56.25% — трюк для aspect-ratio 16:9 (9/16 = 0.5625)
     Используется для поддержки браузеров без aspect-ratio */
  padding-top: 56.25%;
  position: relative;
}

/* Хак для Safari: transform создаёт stacking context
   и предотвращает баг с border-radius + overflow */
.card {
  transform: translateZ(0);
  border-radius: 8px;
  overflow: hidden;
}

Временное отключение

.element {
  color: red;
  /* background: blue; — отключено для отладки */
  font-size: 16px;
}

Комментарии в препроцессорах

// SCSS: однострочный комментарий — НЕ попадает в скомпилированный CSS
/* CSS-комментарий — попадает в скомпилированный CSS */
/*! Важный комментарий — сохраняется даже при минификации */

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

  • // в CSS — двойной слэш — это ошибка синтаксиса в CSS (не в SCSS); браузер проигнорирует всю строку или следующий блок
  • Незакрытый комментарий — /* без закрывающего */ нарушит весь следующий CSS
  • Вложенные комментарии — /* внешний /* вложенный */ текст */ — не работают в CSS; /* вложенный */ закрывает первый комментарий

Связанные темы

Ресурсы