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

Вы уже умеете писать правила и подключать таблицу стилей. Но иногда нужно оставить в коде заметку для себя или на время теста отключить стиль, не удаляя его. Для этого в CSS есть комментарии.

Что такое комментарии в CSS?

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

Как записывается комментарий

Комментарий выглядит так: /* ваша заметка */. Всё, что находится между открывающим /* и закрывающим */, движок CSS игнорирует. Посетители не видят комментарии как текст страницы: они остаются только в исходном коде таблицы стилей (и в DevTools, если открыть файл).

Почему хватает короткой заметки

Однострочный комментарий над правилом может объяснить, зачем там это значение: фирменный цвет, временное исправление, решение ради доступности. Пишите коротко, а не сочинениями: через пару недель вам хватит одной подсказки, чтобы всё вспомнить.

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

Комментарий может занимать несколько строк. Обычно перед группой связанных правил ставят небольшой «заголовок раздела», чтобы по длинной таблице стилей было легко ориентироваться.

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

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

Объявление (declaration) или целое правило можно заключить в комментарий, чтобы отключить его, не удаляя. Потом достаточно убрать маркеры, и стиль вернётся. Это удобно при отладке, когда вы ищете, какое свойство ломает вёрстку.

Правильная привычка при тестировании

Комментируйте самый маленький фрагмент, который помогает разобраться, и начинайте с одного объявления. Если страница снова выглядит нормально, виновник найден. Дальше либо исправьте значение, либо удалите ненужный код. Не оставляйте в готовой таблице стилей большие отключённые блоки навсегда.

Не то же самое, что комментарии в HTML

Комментарии HTML записываются как <!-- и -->, а комментарии CSS — как /* и */. Не вставляйте маркеры HTML-комментария в файл .css (и в блок <style> тоже: там действует синтаксис CSS). У каждого языка своя запись комментариев. Если вы уже знакомы с комментариями в HTML, считайте это похожим навыком, но с другими символами.

Комментарии — не сейф

Любой, кто может открыть таблицу стилей (или воспользоваться «Просмотром кода страницы» либо вкладкой Network), прочитает ваши комментарии. Никогда не пишите в комментариях CSS пароли, закрытые ключи и секретные токены. Комментарии нужны для рабочих заметок, а не для хранения чувствительных данных.

Попробуйте сами

1. Откройте учебную таблицу стилей (или блок <style>), в которой есть правило .hero со свойствами color и font-size.
2. Над правилом добавьте однострочный комментарий, объясняющий выбор цвета.
3. Заключите объявление font-size в /* … */, сохраните и обновите страницу: размер вернётся к значению по умолчанию, а цвет по-прежнему применится.
4. Уберите маркеры комментария вокруг font-size и снова обновите страницу, чтобы вернуть стиль.
5. По желанию: над группой правил добавьте короткий многострочный комментарий-заголовок раздела.

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

• Использовать маркеры HTML (<!-- -->) внутри CSS: движок CSS не считает их комментарием
• Забыть закрывающий */, из-за чего остаток таблицы стилей игнорируется
• Пытаться вкладывать комментарии друг в друга (/* outer /* inner */ still broken */): комментарии CSS нормально не вкладываются
• Месяцами держать в рабочих файлах огромные блоки закомментированных правил
• Оставлять в комментариях секреты или закрытые URL

Итоги

• Комментарии CSS записываются между /* и */
• При применении стилей браузер игнорирует текст комментария
• Используйте их для коротких заметок, заголовков разделов или временного отключения при тестировании
• В HTML комментарии выглядят как <!-- -->; не смешивайте этот синтаксис с CSS
• Комментарии видны в исходном коде: никогда не храните там секреты