Enter
    Расширенный поиск
    Клавиша / esc

    CSS

    Комментарии в 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 /.

    На практике

    Скопировано

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

    Скопировано

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

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

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

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

    Скопировано

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

    Читайте также