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

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

Тогда, Вы знаете, что такое комментарии CSS? Вы знаете, как это можно сделать? Сегодня мы объясним все, чтобы вы о них знали.

Индекс

  • 1 Что такое комментарии?
    • 1.1 К чему комментарии?
  • 2 Как добавлять комментарии CSS
  • 3 Типы комментариев в CSS, которые вы можете разместить

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

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

К чему комментарии?

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

Подпишитесь на наш Youtube-канал

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

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

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

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

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

Поэтому важно знать его немного больше. Фактически, вы собираетесь использовать чаще всего CSS3.

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

Как вы делаете комментарии CSS? Что ж, для этого нужно сделать следующее:

  • Откройте комментарий с кривой косой чертой (Shift + 7).
  • Затем поставьте звездочку.
  • Это начало вашего комментария таким образом, что все, что вы пишете с этого момента, не будет отображаться в Интернете визуально, хотя это будет в HTML-коде Интернета.
  • Чтобы закрыть комментарий, нужно сначала поставить звездочку, а затем кривую косую черту.
  • В это время следующее, что вы напишете, будет визуально влиять на сеть, и это будет видно.

Визуально комментарий выглядел бы так:

/ * Вот комментарий, который будет визуально скрыт в сети * /

Если вы сделали это хорошо, скорее всего, он будет серым, а не черным или другими цветами, как это происходит с другими кодами.

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

Типы комментариев в CSS, которые вы можете разместить

Когда вы работаете с HTML, вы обычно добавляете несколько комментариев, чтобы знать, что вы делаете, или чтобы предупредить вас о том, что есть незавершенные части или ошибки, которые вы должны исправить. Однако впоследствии важно удалить те типы комментариев, которые на самом деле бесполезны. Это не значит, что вы должны удалить их все.

Есть некоторые комментарии CSS, которые следует оставить. Который? Следующие:

  • Уточняющие комментарии. Это комментарии CSS, которые помогают объяснить что-то конкретное. Например, размер изображений в конкретном разделе, чтобы вы знали, какие изображения использовать.
  • Блокировать комментарии. То есть аннотации, которые предназначены для разделения каждого раздела или части веб-сайта: нижний колонтитул, заголовок и т. Д.
  • CSS отключен. С этим вы должны быть осторожны, потому что вы должны убедиться, что он отключен, но может работать правильно, если вы захотите использовать его снова. Например, представьте, что у вас есть веб-сайт, и он работает очень медленно. Затем вы решаете отключить ползунок, который вы разместили первым, и посмотрите, улучшит ли он работу в Интернете. Если это так, вы можете вернуть его в любое время после устранения проблемы.
  • Кредитные комментарии. Наконец, вы можете оставить комментарии, относящиеся к человеку, создавшему код, или к версии веб-сайта, которую вы создали, чтобы вы могли развиваться или отдавать должное человеку, выполнившему работу (хотя это в некоторых случаях не видны визуально.

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

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

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

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

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

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

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

Начните комментарий с добавления /* и завершите добавлением */.

Имеет следующий синтаксис:

/* comment */

Синтаксис используется для однострочных и многострочных комментариев. А теперь рассмотрим пример, где использованы комментарии:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>          
      p {
      line-height: 2em; /*1em = 16px */
      }         
    </style>
  </head>
  <body>
    <p>Какой-нибудь параграф.
 
 </p>
    <p>Высока строки этого параграфа равна 2em.</p>
  </body>
</html>

Попробуйте сами!

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

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

Пример

/***************************
****************************
Стиль для фона.
****************************
***************************/

Или может иметь следующий вид:

Пример

/*---------------------- Фоновые стили ------------------------*/

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

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

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

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

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

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

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

 

  <голова>
    Название документа
    <стиль>
      п {
        высота строки: 2em;/*1em = 16px */
      }
    
  
  <тело>
    
Некоторый абзац. 

    
Этот абзац написан с высотой строки 2em.

Попробуй сам »

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

 

  <голова>
    Название документа
    <стиль>
      а {
        дисплей: блок;
        ширина: 190 пикселей;
        высота: 45 пикселей;
        /******************************
        *******************************
        Это стиль логотипа.
        *******************************
        ****************************/
        фон: url('/build/images/w3docs-logo-black.png') центр без повторов
      }
    
  
  <тело>
     
Пример комментария
 
     w3docs.com/">

Попробуй сам »

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

Теперь давайте посмотрим на другой пример.

 

  <голова>
    Название документа
    <стиль>
      а {
        дисплей: блок;
        ширина: 190 пикселей;
        высота: 45 пикселей;
       /*-------- Логотип ------------------------* /
        фон: url('/build/images/w3docs-logo-black.png') центр без повторов
      }
    
  
  <тело>
     
Комментарий

Попробуй сам »

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

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

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

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

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

Навязчивое форматирование кода CSS: организация, комментарии и подписи

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

 /* я морж */

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

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

Информация о конкретном коде

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

 /* пример границы */
раздел # пример_01 {
кайма: тонкая сплошная красная;
}
раздел # пример_02 {
вес шрифта: полужирный;
поле: 3em 0;
_маржа: 1em; /* Взлом IE6 */
красный цвет;
}

Обсессивно-компульсивная часть этого типа комментариев заключается в сокращении объяснения до абсолютного минимума. Вместо того, чтобы писать «некоторые браузеры получают это, но не Internet Explorer», я пишу «только не-IE». Кроме того, я избегаю использования заглавных букв, за исключением случаев, когда речь идет об аббревиатурах. Это помогает поддерживать поток документа, который в противном случае был бы написан строчными буквами, однако я также видел эффективное использование сумасшедшей 9.0057 ВСЕ ЗАГЛАВНЫЕ БУКВЫ подход. И, наконец, только начальный ( /* ) и закрывающий ( */ ) символы комментария включаются в настоящий комментарий вместе с одним пробелом с каждой стороны. Взятые вместе, эти три метода помогают сделать эти типы пояснительных комментариев легкими, четкими и простыми.

Организация областей кода

Отличный способ оставаться организованным при написании CSS — это группировать связанные блоки кода согласованным и логичным образом. Например, я обычно разбиваю вещи по строкам:

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

Затем, чтобы организовать такую ​​таблицу стилей, каждая область должна быть четко обозначена каким-то отличительным комментарием. Хотя я склоняюсь к простоте, используя что-то вроде этого:

 /* === ОБЩИЕ НАСТРОЙКИ === */

.. Я видел (и использовал) множество креативных секционных комментариев:

 /* ОБЩИЕ НАСТРОЙКИ НАСТРОЙКИ
   ----------------------------- */
/* ГЛОБАЛЬНЫЕ НАСТРОЙКИ
   ============================== */
/* ==[ Глобальные настройки ]== */
/* [[[ Глобальные настройки ]]] */
/*** ГЛОБАЛЬНЫЕ НАСТРОЙКИ ***/
/* ===============
   ГЛОБАЛЬНЫЕ НАСТРОЙКИ
   =============== */

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

Навигация по обширным таблицам стилей

Для обширных или очень сложных таблиц стилей можно также использовать комментарии CSS для реализации механизма «быстрого перехода», облегчающего навигацию. Включая определенный символ в комментарии к разделам, вы предоставляете способ «прыгать» по документу, используя неизбежную функцию «Найти» вашего программного обеспечения. Например, со следующими комментариями разделов, разбросанными по всей моей таблице стилей, было бы очень легко перейти от одного раздела к другому с помощью простой клавиши 9. 0057 Найти(«=») команда:

 /* ===GLOBAL=== */
.
.
.
/* ===ПЕРВИЧНЫЙ=== */
.
.
.
/* ===ЗАГОЛОВОК=== */
.
.
.
/* ===БОКОВАЯ ПАНЕЛЬ=== */
.
.
.
/* ===ФУТЕР=== */
.
.
.

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

 /* CSS DIRECTORY
1. =ГЛОБАЛЬНЫЙ
2. = ОСНОВНОЙ
3. = ЗАГОЛОВОК
4. =БОКОВАЯ ПАНЕЛЬ
5. =ФУТЕР
*/

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

 /* HACK DIRECTORY
% взлом блочной модели
$ цели сафари
и взломать ClearFix
? нацелен на IE 7
*/

..с соответствующими якорями, также присутствующими в самих комментариях. Тот же ход мыслей можно применить практически к любому важному аспекту таблицы стилей. Что-то подобное, безусловно, поможет сотрудникам и клиентам понять документ и ориентироваться в нем.

Другие замечательные способы использования скромного комментария

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

Отметка времени и информация о документе

Отличный способ оставаться организованным на уровне команды или сети, особенно полезен в периоды быстрого сотрудничества или разработки. В дополнение к этому примеру ознакомьтесь с несколькими верхними строками практически любой темы WordPress для отличной «реальной» реализации.

 /* ИНФОРМАЦИЯ О ДОКУМЕНТЕ
- Документ: Тема музыкального автомата
- Версия: 1.2.3
- Клиент: Фонци Винклер
- Автор: М. Гиббонз
*/
Информация о цвете и шрифте

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

 /* ЦВЕТА
- основной текст по умолчанию #ffffcc
- текст субтитров h3 #ff9900
- границы ввода формы #cc9933
- текст p по умолчанию #f0f0f0
- перед границами #ffff99
*/
/* ШРИФТЫ
- основной текст по умолчанию Arial, Helvetica Neue, Helvetica, без засечек
- текст субтитров h3 Garamond, Hoefler Text, Times New Roman, Times, serif
- форма ввода текста Cambria, Georgia, Times, Times New Roman, Times, serif
- по умолчанию текст p Copperplate Light, Copperplate Gothic Light, serif
- pre и code Consolas, Lucida Console, Monaco, monospace
*/
Подписи товарных знаков, цитаты, слоганы

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

 /* весь ваш код принадлежит поэзии */

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

No related posts.