Как добавить комментарии к каскадным таблицам стилей (CSS)

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

Проблема со стилями

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

Комментарии Добавить структуру и ясность

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

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

Только для профессионалов

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

Добавление комментариев CSS

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

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

  / *

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

  * /

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

Комментарий CSS может занимать любое количество строк. Вот два примера:

/ * пример красной рамки * /
 div # border_red {
 бордюр: тонкий сплошной красный;
 }
/ ***************************
****************************
Стиль для кодового текста
****************************
*************************** /

Разрыв разделов

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

/ * ----------------------- Стили заголовков ----------------------- --- * /

Эти комментарии указывают на начало нового раздела кодирования.

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

Поскольку теги комментариев говорят браузеру игнорировать все, что находится между ними, вы можете использовать их для временного отключения определенных частей кода CSS. Это может быть удобно при отладке или при настройке форматирования веб-страницы. Фактически, дизайнеры часто используют их, чтобы «закомментировать» или «отключить» области кода, чтобы посмотреть, что произойдет, если этот раздел не является частью страницы.

Для этого просто добавьте открывающий тег комментария перед кодом, который вы хотите закомментировать (отключить); поместите закрывающий тег там, где вы хотите, чтобы отключенная часть заканчивалась. Ничто между этими тегами не повлияет на визуальное отображение сайта, что позволит вам отладить CSS, чтобы увидеть, где происходит проблема. Затем вы можете пойти и исправить только эту проблему и удалить комментарии из кода.

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

Напомним, вот несколько советов, которые следует помнить для использования комментариев в вашем CSS:

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

Представление

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