Строки комментариев (//) в CSS

CSS использует тот же синтаксис «блока комментариев», что и языки семейства C — вы начинаете комментарий с / * , и заканчиваете его * /.

Тем не менее, в CSS отсутствует правило синтаксиса «строка комментария», как в этих языках, где весь код от / / и до конца строки считается комментарием.

Многие разработчики просят, чтобы этот синтаксис также был добавлен, но, к сожалению, наши руки связаны — минимизаторы CSS не распознают строки комментариев.

Поэтому, если мы добавим такой символ, и минимизатор удалит все разрывы строк (как он, как правило, и делает), то строка комментариев выведет в комментарии все стили, следующие за ней!

Тем не менее, CSS на самом деле уже позволяет использовать символ / /. Но он используется не для всей строки, а для последующей конструкции.

То есть, когда вы используете / /, последующая конструкции CSS — будь то объявление или блок — будет «выведена в комментарии».

Например:

.foo {
  width: auto;
  //height: 500px;
  background: green;
}

В этом коде объявление height выведено в комментарии.

Аналогично:

//@keyframes foo {
  from, to { width: 500px; }
  50% { width: 400px; }
}
@keyframes bar {
  from, to { height: 500px; }
  50% { height: 400px; }
}

Здесь через / / выведено в комментарии первое объявление @keyframes.

Отмечу, что если вы попытаетесь использовать / / только для того, чтобы разместить в вашей таблице стилей комментарий, вам следует быть осторожными, — простой текст не является CSS конструкцией, так что при обработке таблицы стилей он будет пропущен, а в комментарии удалится первая следующая CSS-конструкция:

// Сделать какую-нибудь вещь.
.foo { animation: bar 1s infinite; }
/* Упс, блок .foo выпал в комментарии! */

Обновление: Упс, нашел ошибку у себя самого. К сожалению, синтаксис этого блока ( {} 😉 был некорректный.

Вы можете избежать этого, заканчивая текстовый комментарий символами {} (если вы не следуете правилам) или символом ; (если это объявление), чтобы дать CSS понять, что это просто шутка.

// Сделать что-нибудь {}
.foo { animation: bar 1s infinite; }
/* Теперь все правильно! */

Внимательный читатель может понять (или он просто знал это и раньше), что символ / / используется вовсе не для вставки комментариев.

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

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

Тем не менее, это все равно потенциально полезно для тех, кто не любит искать конец строки, чтобы закрыть комментарий символами * /, таких как я. ^ _ ^

Перевод статьи «Single Line Comments (//) in CSS» был подготовлен дружной командой проекта Сайтостроение от А до Я.