Главная » Языки программирования

Комментарии в коде css

На чтение 10 мин
Содержание
  1. Комментарии в CSS
  2. Кратко
  3. Пример
  4. Как пишется
  5. Как понять
  6. Ещё пример
  7. Подсказки
  8. На практике
  9. Егор Левченко советует
  10. Алёна Батицкая советует
  11. Изучаем комментарии в CSS
  12. Как добавить CSS комментарий
  13. Разделение на секции
  14. «Комментирование» кода в CSS
  15. Советы по CSS комментированию
  16. Эффективность
  17. Comments
  18. Syntax
  19. Examples
  20. Notes
  21. Specifications
  22. See also
  23. Found a content problem with this page?
  24. MDN
  25. Support
  26. Our communities
  27. Developers
  28. CSS GuideLines, часть 2. Комментирование кода
  29. Высокоуровневые комментарии
  30. Низкоуровневые комментарии
  31. Препроцессоры и комментирование
  32. Удаление комментариев

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

На практике

Скопировать ссылку «На практике» Скопировано

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

Скопировать ссылку «Егор Левченко советует» Скопировано

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

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

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

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

Скопировать ссылку «Алёна Батицкая советует» Скопировано

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

Источник

Изучаем комментарии в CSS

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

Как добавить CSS комментарий

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

• Начните свой комментарий, добавив /* • Закройте комментарий, добавив */

Он может быть однострочным или многострочным.

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

div#border_red < border: thin solid red; >/* красная граница пример */ И многострочный пример: /*************************** **************************** Многострочный комментарий **************************** ***************************/

Разделение на секции

Часто я использую CSS комментарии в коде для структуризации стилей. Чтобы сделать это, я добавляю комментарии с большим количеством дефисов. Они формируют более очевидные разрывы на странице. Вот пример:

/*----------------------- Заголовок начинается здесь ------------------------------ */

«Комментирование» кода в CSS

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

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

Советы по CSS комментированию

  1. Комментарии могут занимать несколько строк;
  2. Комментарии могут включать в себя CSS элементы , которые не нужно отображать в браузере и удалять полностью. Это хороший способ отладки стилей сайта;
  3. Используйте комментарии, когда пишете сложный CSS , чтобы добавить разъяснения и сообщить разработчикам о нюансах, которые стоит знать;
  4. Комментарии в HTML CSS могут также включать в себя такую метаинформацию, как:
  • Автор;
  • дата создания;
  • информация об авторских правах.

Эффективность

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

ВЛ Виктория Лебедева автор-переводчик статьи «

Источник

Comments

A CSS comment is used to add explanatory notes to the code or to prevent the browser from interpreting specific parts of the style sheet. By design, comments have no effect on the layout of a document.

Syntax

Comments can be placed wherever white space is allowed within a style sheet. They can be used on a single line, or traverse multiple lines.

Examples

/* A one-line comment */ /* A comment which stretches over several lines */ /* The comment below is used to disable specific styling */ /* span < color: blue; font-size: 1.5em; >*/

Notes

Specifications

See also

  • CSS key concepts:
    • CSS syntax
    • At-rules
    • Specificity
    • Inheritance
    • Box model
    • Layout modes
    • Visual formatting models
    • Margin collapsing
    • Values
      • Initial values
      • Computed values
      • Used values
      • Actual values

      Found a content problem with this page?

      This page was last modified on Jul 17, 2023 by MDN contributors.

      Your blueprint for a better internet.

      MDN

      Support

      Our communities

      Developers

      Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
      Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

      Источник

      CSS GuideLines, часть 2. Комментирование кода

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

      • Что какой-то кусок кода зависит от другого куска;
      • Какой эффект повлечет за собой изменение определенной части кода;
      • Где еще можно использовать кусок кода без появления новых проблем;
      • Какие стили наследует определенный элемент;
      • Какие стили могут быть проигнорированы;
      • Где разработчик намеревался использовать код.

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

      Как правило, следует комментировать те места кода, которые будут непонятны разработчику, если вырвать их из контекста. Нет необходимости делать пометку о том, что color: red; сделает текст красным. Но, например, если вы используете свойство overflow: hidden; для очистки float’ов, а не для скрытия контента за пределами блока, то вам следовало бы добавить пояснительный комментарий.

      Высокоуровневые комментарии

      Для больших комментариев, описывающих целую секцию или компонент, мы используем DocBlock-подобные мультистрочные комментарии, соответствующие нашему правилу о 80 символах в строке.

      Ниже можно увидеть реальный пример комментирования кода шапки сайта CSSWizardy.

      /** * The site’s main page-head can have two different states: * * 1) Regular page-head with no backgrounds or extra treatments; it just * contains the logo and nav. * 2) A masthead that has a fluid-height (becoming fixed after a certain point) * which has a large background image, and some supporting text. * * The regular page-head is incredibly simple, but the masthead version has some * slightly intermingled dependency with the wrapper that lives inside it. */

      Этот уровень комментирования должен использоваться для описания элемента в общем: его состояния, от чего это состояние зависит и тому подобное.

      Указание на наследование стилей

      Когда вы работаете с большим количеством файлов, то не всегда наборы правил, относящиеся друг к другу, будут находиться в одном и том же файле. Например, у вас может быть главный класс .btn , содержащий в себе только основные стили кнопки (размеры и отступы, например). Этот класс расширяется в файле компонентов, там в него добавляются стили для придания нужного внешнего вида. Эти связи между объектами мы должны обозначить с помощью указания на наследование стилей.

      Например, в файле с главным классами (объектами):

      /** * Extend `.btn <>` in _components.buttons.scss. */ .btn <>

      В файле с дочерними классами:

      /** * These rules extend `.btn <>` in _objects.buttons.scss. */ .btn--positive <> .btn--negative <>

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

      Низкоуровневые комментарии

      Часто нам требуется прокомментировать определенную строку кода с объявлением какого-либо свойства. Для этого мы используем сноски. По ссылке можно увидеть пример более сложного комментирования кода шапки сайта, о которой говорилось выше. Такой способ комментирования позволяет нам держать всю документацию в одном месте, и затем всего лишь ссылаться на нужное место в документации, вместо того, чтобы писать длинный комментарий прямо в коде.

      Препроцессоры и комментирование

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

      // Dimensions of the @2x image sprite: $sprite-width: 920px; $sprite-height: 212px; /** * 1. Default icon size is 16px. * 2. Squash down the retina sprite to display at the correct size. */ .sprite < width: 16px; /* [1] */ height: 16px; /* [1] */ background-image: url(/img/sprites/main.png); background-size: ($sprite-width / 2 ) ($sprite-height / 2); /* [2] */ >

      В этом примере мы задокументировали переменные (которые не будут скомпилированы) с помощью комментариев препроцессора, а для обычного кода мы применили стандартный способ комментирования. Такой способ гарантирует нам то, что в скомпилированных CSS-файлах будет только релевантная и нужная для нас информация.

      Удаление комментариев

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

      Источник

      Читайте также:  Jquery not has css
Оцените статью
© 2023 Программирование