Комментарии в CSS: как добавлять примечания в код

Зачем нужны комментарии в CSS? 🤔

Комментарии — это заметки в коде, которые браузер игнорирует, но которые помогают разработчикам понимать логику стилей. Они особенно полезны:
- Когда код сложный и требует пояснений.
- Если над проектом работает несколько человек.
- Для временного отключения частей кода без удаления.
- Чтобы оставить подсказки для себя или коллег.

/* Это комментарий — браузер его не прочитает, но разработчик увидит! */

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

В CSS комментарии создаются с помощью символов /* (начало) и */ (конец). Всё между ними игнорируется браузером.

Пример однострочного комментария

/* Это однострочный комментарий */
body {
  font-family: Arial, sans-serif;
}

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

Если нужно описать большой блок кода, комментарий можно разбить на несколько строк:

/*
  Это многострочный комментарий.
  Он может занимать сколько угодно строк.
  Например, пояснение к стилям блока header.
*/
header {
  background-color: #f8f9fa;
  padding: 20px;
}

Где и как использовать комментарии эффективно? 🎯

1. Разделение логических блоков

Комментарии помогают структурировать CSS-файл. Например, можно разметить секции:

/* === HEADER STYLES === */
header { ... }

/* === MAIN CONTENT === */
.main { ... }

/* === FOOTER === */
footer { ... }

2. Объяснение неочевидных решений

Если код содержит хак или специфичное решение, лучше пояснить его:

/* Фикс для IE11 (не поддерживает flex-gap) */
.card-list {
  margin: -5px; /* Компенсирует margin у дочерних элементов */
}

3. Временное отключение кода

Вместо удаления кода его можно закомментировать и вернуть позже:

.button {
  background: blue;
  /* color: white;  ← временно отключено для тестирования */
}

Чего НЕ стоит делать с комментариями 🚫

Не перегружайте код — если стиль очевиден, комментарий излишен.
Не оставляйте устаревшие комментарии — они вводят в заблуждение.
Не пишите очевидные вещи — например:

/* Устанавливает красный цвет текста */
color: red;  // ❌ Избыточный комментарий

Продвинутые приёмы: вложенные комментарии и препроцессоры 🔥

Вложенные комментарии (осторожно!)

В CSS нельзя вкладывать комментарии друг в друга:

/*
  /* Вложенный комментарий */  ← Ошибка! Браузер проигнорирует всё после первой */
*/

Комментарии в SASS/SCSS

Препроцессоры поддерживают однострочные (//) и многострочные (/* ... */) комментарии. Разница:

// Этот комментарий не попадёт в итоговый CSS
/* А этот — попадёт, если не используется сжатие */

Итог: комментарии = ваш код говорит сам за себя 🎤

Грамотные комментарии делают код понятнее, поддерживаемее и дружелюбнее к другим разработчикам (и к вам через полгода!).

💡 Совет от Данилы Бежина (https://www.youtube.com/@DanilaBezhin):
«Пишите комментарии так, будто их прочитает человек, который только начал изучать CSS. Чем яснее — тем лучше!»

Теперь ваш CSS заговорит — и коллеги скажут вам спасибо! 🚀