Каждый веб-сайт состоит из структурных, функциональных и стилистических элементов. Каскадные таблицы стилей диктовать внешний вид («внешний вид») веб-сайта. Эти стили хранятся отдельно от структуры HTML, чтобы упростить обновление и соблюдение веб-стандартов.
Проблема со стилями
Учитывая размер и сложность многих современных веб-сайтов, таблицы стилей могут стать довольно длинными и громоздкими. Эта проблема усложнилась теперь, когда медиа-запросы для адаптивные стили веб-сайтов являются неотъемлемой частью дизайна, гарантируя, что веб-сайт будет выглядеть так, как должен, независимо от устройства. Сами по себе эти медиа-запросы могут добавить значительное количество новых стилей в документ CSS, что еще больше усложнит работу. Управление этой сложностью - вот где комментарии CSS могут стать неоценимым подспорьем для дизайнеров и разработчиков веб-сайтов.
Комментарии добавляют структуру и ясность
Добавление комментариев к файлам CSS веб-сайта упорядочивает разделы этого кода для человека, читающего документ. Это также обеспечивает согласованность, когда один веб-профессионал начинает с того, на чем остановился другой, или когда над сайтом работают группы людей.
Хорошо отформатированные комментарии сообщают важные аспекты таблицы стилей членам группы, которые могут не быть знакомы с кодом. Эти комментарии также полезны для людей, которые работали над сайтом раньше, но не работали в последнее время; веб-дизайнеры обычно работают на многих сайтах, и сложно запомнить стратегии дизайна от одного к другому.
Только для профессионалов
Комментарии CSS не отображаются, когда страница отображается в веб-браузеры. Эти комментарии носят исключительно информационный характер, так же как HTML-комментарии есть (хотя синтаксис другой). Эти комментарии CSS никоим образом не влияют на визуальное отображение сайта.
Добавление комментариев CSS
Добавить комментарий CSS довольно просто. Добавьте в комментарий правильные открывающие и закрывающие теги комментария:
Начните свой комментарий с добавления /* и закрыть его */.
Все, что появляется между этими двумя тегами, является содержанием комментария, видимым только в коде и не отображаемым браузером.
Комментарий CSS может занимать любое количество строк. Вот два примера:
/ * пример красной границы * /
div # border_red {
окантовка: тонкая сплошная красная;
}
/***************************
****************************
Стиль текста кода
****************************
***************************/
Выделение разделов
Многие дизайнеры организуют таблицы стилей в виде небольших, легко усваиваемых фрагментов, которые легко сканировать при чтении. Как правило, вы видите перед комментариями, за которыми следует ряд дефисов, которые создают большие, очевидные разрывы на странице, которые легко увидеть. Вот пример:
/ * Стили заголовков * /
Эти комментарии указывают на начало нового раздела кодирования.
Комментирующий код
Поскольку теги комментариев говорят браузеру игнорировать все, что находится между ними, вы можете использовать их для временного отключения определенных частей кода CSS. Этот трюк может быть полезен при отладке или при настройке форматирования веб-страницы. Фактически, дизайнеры часто используют их, чтобы «закомментировать» или «выключить» области кода, чтобы увидеть, что произойдет, если этот раздел не является частью страницы.
Добавьте открывающий тег комментария перед кодом, который хотите закомментировать (отключить); поместите закрывающий тег в том месте, где должна заканчиваться отключенная часть. Ничто между этими тегами не повлияет на визуальное отображение сайта, что поможет вам отладить CSS, чтобы увидеть, где возникает проблема. Затем вы можете исправить только этот сбой, а затем удалить комментарии из кода.
Советы по комментированию CSS
Многие программисты включают блоки комментариев в начало любого нового файла с кодом. Имитируйте эту стратегию, включив блок комментариев с вашим именем, соответствующими датами и связанной информацией, чтобы помочь люди понимают контекст проекта, а не только решения о том, что происходит с конкретным кодом блокировать.