Содержание

Строки комментариев (//) в 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 выпал в комментарии! */

Обновление: Упс, нашел ошибку у себя самого.

Вадим Дворниковавтор-переводчик статьи «Single Line Comments (//) in CSS»

Комментарии в CSS — CSS — Дока

Кратко

Скопировано

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

На практике

Скопировано

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

Скопировано

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

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

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

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

Скопировано

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

Как добавить комментарии в CSS для себя или своего разработчика

Загрузить сейчас: бесплатные шаблоны кодирования CSS

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

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

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

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

Как оставлять комментарии в CSS

Чтобы прокомментировать в CSS, просто поместите обычный текст внутри меток /* */.

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

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

.
 
 /* Это комментарий в CSS */ 

 
 р { 

 
   цвет: белый; 

 
   background-color: #2594A4; 

 
 }

Однострочный комментарий может иметь собственную строку или может быть размещен на строке с активным кодом, как показано здесь:

 
 р { 

 
   цвет: белый; /* установить белый цвет текста */ 
 

 
 }

Вы также можете отформатировать их как многострочные комментарии:

 
 /* Эти слова… 

 
 …внутри… 

 
 …тот же комментарий. */

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

См. комментарии Pen CSS: пример от HubSpot (@hubspot) на CodePen.

Комментарии работают как во внутреннем, так и во внешнем CSS, а также с фреймворками CSS, такими как Bootstrap CSS.

Помимо объяснения разделов кода, комментарии также часто используются для «закомментирования» фрагмента кода CSS.

Закомментировать CSS

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

Комментирование — удобный прием при тестировании и отладке кода CSS. Это позволяет вам пробовать различные комбинации стилей, так как размещение объявления внутри комментария делает его невидимым для браузера.

Прежде чем продолжить, давайте уточним, что такое набор правил. Набор правил — это селектор CSS и все объявления в скобках. Ниже приведен набор правил для всех элементов абзаца на веб-странице (которые мы использовали в приведенных выше примерах).

 
 р { 

 
   цвет: белый; 

 
   background-color: #FF5C35; 

 
   отступ: 10 пикселей; 

 
 }

Теперь давайте рассмотрим пример закомментированного отдельного объявления в этом наборе правил.

См. комментарии Pen CSS: комментарий 1 от HubSpot (@hubspot) на CodePen.

Декларация цвет: белый больше не действует, так как она была закомментирована.

Теперь давайте посмотрим на другой пример, где закомментирован весь набор правил:

См. комментарии Pen CSS: комментарий 2 от HubSpot (@hubspot) на CodePen.

Как видите, к элементу абзаца не применяется стиль.

Однострочный комментарий CSS

Технически существует еще один способ закомментировать отдельные строки в CSS в некоторых браузерах, поместив двойную косую черту (//) перед кодом, который вы хотите закомментировать, вместо использования стандартный метод /* … */ .

 
 /* Эта строка закомментирована. */ 

 
 // Эта строка закомментирована, но вы не должны использовать этот метод!

Однако настоятельно рекомендуется избегать использования этого метода в коде. Метод комментариев с двойной косой чертой не стандартизирован в CSS (в отличие от метода /* … */ ), а это означает, что его работа во всех браузерах не гарантируется.

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

Чтобы быть в безопасности, придерживайтесь метода комментирования /* … */ , который мы обсуждали, так как он является стандартным, работает во всех браузерах и операционных системах и не будет объявлен устаревшим в ближайшее время.

Комментарии CSS и комментарии HTML

Вы также могли заметить, что комментарии CSS работают аналогично комментариям HTML. Разница между ними в том, что комментарии CSS обозначаются символами /* … */ , тогда как комментарии HTML заключаются в тегов.

Разница показана в примере ниже:

См. комментарии Pen CSS и HTML-комментарии от HubSpot (@hubspot) на CodePen.

Создание комментариев в CSS

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

Примечание редактора: этот пост был первоначально опубликован в июле 2020 года и обновлен для полноты информации.

Темы: Начальная загрузка и CSS

Не забудьте поделиться этим постом!

Связанные статьи

  • Пошаговое руководство по элементу таблицы Bootstrap CSS [+ 7 примеров]

    08 марта 2023 г.

  • hubspot.com/website/bootstrap-navbar»>

    Как создать, отредактировать и создать панель навигации в Bootstrap

    08 марта 2023 г.

  • Как создать идеальную сетку CSS на вашем веб-сайте [примеры макетов]

    28 февраля 2023 г.

  • hubspot.com/website/css-border»>

    Как создавать и стилизовать границы в CSS

    23 февраля 2023 г.

  • Как вложить селекторы CSS для более чистого кода

    20 февраля 2023 г.

  • com/website/bootstrap-image-classes»>

    Классы изображений Bootstrap: что это такое и как они работают?

    20 февраля 2023 г.

  • CSS-переменные: что это такое и как они работают

    16 февраля 2023 г.

  • hubspot.com/website/what-is-a-favicon»>

    Что, почему и как сделать фавикон для вашего сайта

    08 февраля 2023 г.

  • Введение в свойство отображения CSS

    02 февраля 2023 г.

  • Кнопки Bootstrap: объяснение классов и стилей

    02 февраля 2023 г.

Как написать комментарий вместе с кодом CSS?

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

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

Комментарий — это примечание, используемое для описания любой части кода. В CSS мы можем добавлять комментарии в нашу таблицу стилей, чтобы объяснять и документировать различные участки кода. Это делает наш код более читабельным и понятным. При работе над проектом с группой разработчиков включение комментариев помогает другим понять структуру нашего дизайна и его логику. Это дает нам преимущество в дальнейшем сопровождении и отладке кода. Поскольку браузер не отображает комментарии, они не влияют на наш дизайн.

Синтаксис

Давайте разберемся, как мы можем писать комментарии вместе с кодом css.

 
 /* Это комментарий CSS */

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

Примеры

В следующем примере показано, как написать комментарий вместе с кодом CSS.

 
 /* Добро пожаловать в разделы Scaler; давайте узнаем о комментариях CSS */
/* Это однострочный комментарий. Он занимает одну строку .*/
/*
это многострочный
Комментарий. Он охватывает
несколько строк.
*/
п{
цвет синий" ; /* Устанавливает синий цвет текста */
цвет фона: "зеленый"; /*Задает зеленый цвет фона */
}

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

  • Это удобный способ тестирования и отладки кода CSS. Часто бывает необходимо отключить некоторые участки кода. Большинство программистов таким образом «комментируют» код, начиная с /* и заканчивая /* . Чтобы найти ошибки, мы можем закомментировать часть кода. Обнаружив ошибку, мы можем удалить комментарий и повторно вставить код. Мы также можем комментировать код во время его тестирования, поскольку нам, возможно, придется его отменить. В конце концов, мы не знаем, работает ли новый материал, потому что постоянно его меняем.
  • Чтобы улучшить стили, разработчики могут комментировать и экспериментировать с различными комбинациями свойств CSS.
  • Его также можно использовать для сохранения больших фрагментов кода CSS, которые мы, возможно, захотим повторно использовать позже.

В следующем примере мы узнаем, как закомментировать некоторый код.

КОД HTML: 

 
 
Давайте узнаем о комментариях CSS в темах Scaler

КОД CSS: 

 
 /* Комментируя цвет текста, вы можете поиграть с ним. */
 п {
            /* цвет: зеленый; */
            цвет: темно-синий;
            отступ: 20 пикселей;
            размер шрифта: 50px;
            цвет фона: лазурный;
        }

ВЫХОД: Поскольку мы закомментировали его, текст не отображается зеленым цветом и поэтому невидим для браузера.

В предыдущем примере мы могли бы даже закомментировать весь блок кода. 
 
 /* Комментирование всего стиля и сохранение его для последующего использования. */
/* п {
            
            цвет: темно-синий;
            отступ: 20 пикселей;
            размер шрифта: 50px;
            цвет фона: лазурный;
        } */

ВЫХОД: К элементу абзаца не применяются стили.

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

 
 //Эта строка закомментирована методом двойной косой черты.

Однако настоятельно рекомендуется избегать использования этого метода для однострочных комментариев по следующим причинам:

  • Это не стандартный метод . Некоторые браузеры могут поддерживать этот подход, но код может дать сбой, что приведет к поломке нашего дизайна.

  • Не кроссплатформенный . Некоторые платформы могут не поддерживать этот метод. Однострочный комментарий начинается с «//» и заканчивается новой строкой. Если новая строка отсутствует, часть или весь наш нежелательный код будет закомментирован.

  • Стандартный метод совместим со всеми браузерами вне зависимости от операционной системы и архитектуры устройства.

ПРИМЕЧАНИЕ: Это считается ПЛОХОЙ ПРАКТИКОЙ, и вам следует избегать этого любой ценой.

Комментарии CSS функционируют так же, как и комментарии HTML. Синтаксис — это то, что их разделяет. /*…*/ используется для комментариев CSS, а комментарии HTML заключаются в теги . В следующем примере демонстрируются комментарии HTML и CSS.

Код HTML: 

 
 

<голова>
    <мета-кодировка="UTF-8">
    
    
    
    Комментарии HTML и CSS
    <стиль>
    

<тело>
    <дел>
        
         
КОММЕНТАРИИ CSS
 
        
        
Давайте узнаем о комментариях HTML и CSS в темах Scaler

        
Комментарии в основном похожи на текстовые примечания или часть информации для объяснения нашего кода

Код CSS: 

 
 h2{
    цвет синий';
/* background-color:'yellow'; */
}

/* п{
    цвет: "розовый";
    отступ: 10 пикселей;
    поле: 10 пикселей;
} */

Заключение

  • Комментарии по сути являются текстовыми примечаниями или фрагментами информации, которые помогают нам понять наш код.

    No related posts.