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

Нужно что-то скрыть, но не удалять? Хотите оставить пояснение или подсказку? Вам нужен комментарий.

Время чтения: меньше 5 мин

Кратко

Скопировано

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

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

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

Пример

Скопировано

В CSS существует только один вид комментариев, но их можно записывать по-разному.

        
          
          /*  Комментарий-блок, если нужно  расписать что-то подробно.*/.block {  /* Комментарий в строку */  text-align: center;}
          /*
  Комментарий-блок, если нужно
  расписать что-то подробно.
*/

.block {
  /* Комментарий в строку */
  text-align: center;
}

        
        
          
        
      

Обратите внимание, что комментарий вида // в начале строки в CSS не поддерживается, он работает только в препроцессорах, вроде Sass или Less.

Как пишется

Скопировано

Комментарий оформляется при помощи двух пар символов, /* и */:

        
          
          /* Любой текст */
          /* Любой текст */

        
        
          
        
      

По желанию или в соответствии с принятым в вашей команде стилем кода после открывающих символов можно перенести текст на новую строку, и закрывающую пару тоже поставить на следующей новой строке. Как-то так:

        
          
          /*  Я помню чудное мгновенье:  Передо мной явилась ты,  Как мимолетное виденье,  Как гений чистой красоты.*/
          /*
  Я помню чудное мгновенье:
  Передо мной явилась ты,
  Как мимолетное виденье,
  Как гений чистой красоты.
*/

        
        
          
        
      

Как понять

Скопировано

У комментария обязательно должны быть начало и конец. Открывать комментарий нужно при помощи /*, а закрывать — при помощи зеркальной конструкции */.

Ещё пример

Скопировано

Как выглядит закомментированное свойство:

        
          
          .block {  /* height: 100%; */  width: 100%;}
          .block {
  /* height: 100%; */
  width: 100%;
}

        
        
          
        
      

А вот так можно закомментировать целый блок:

        
          
          /* .block {  width: 100%;  height: 100%;} */
          /* .block {
  width: 100%;
  height: 100%;
} */

        
        
          
        
      

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

        
          
          /* Header */.header {  display: flex;}/* End Header*//* Footer */.footer {  background-color: pink;}/* End Footer */
          /* Header */
.header {
  display: flex;
}
/* End Header*/

/* Footer */
.footer {
  background-color: pink;
}
/* End Footer */

        
        
          
        
      

В таком коротком куске кода комментарии избыточны и смотрятся грязно. Но когда файл со стилями состоит из тысяч строк (такого, конечно, стоит избегать), то такая навигация удобна.

Подсказки

Скопировано

💡 Не злоупотребляйте комментариями. Не стоит пояснять всё подряд. Пишите комментарии только там, где без подсказки никак не понять, что происходит.

💡 Но и не игнорируйте комментарии. Не молчите там, где есть что сказать. Например, вы использовали !important в коде (напомним, что это крайне нежелательная практика), но в данном случае он необходим. Поясните своё решение, чтобы следующий разработчик всё не сломал, удалив нежелательный элемент.

💡 Чтобы быстро закомментировать или раскомментировать текущую строку или выделенный блок кода, в большинстве редакторов кода можно нажать Ctrl / или Cmd /.

На практике

Скопировано

Егор Левченко советует

Скопировано

🛠 Иногда в процессе разработки нужно быстро проверять какую-то гипотезу. Не хочется сгоряча удалять блок кода, вымученного кровью и потом. Просто закомментируй подозрительные строки. Если причина не в них, то раскомментируешь. Удалить всегда успеешь.

🛠 Удаляй все закомментированные свойства перед деплоем — публикацией проекта. Комментарии — утилитарная штука. Они полезны, но сильно загружают код и затрудняют его чтение. Если это не информационные комментарии, а следы экспериментов — удаляй их.

🛠 Иногда можно встретить в начале файла своеобразное оглавление, поясняющее в какой части файла искать стили для того или другого блока. Если у вас очень большой файл, то стоит попробовать такой подход. Он может оказаться удобным.

Алёна Батицкая советует

Скопировано

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