Товаров: 0 (0р.)

Комментирование css: Строки комментариев (//) в CSS

Содержание

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

Обновление: Упс, нашел ошибку у себя самого. К сожалению, синтаксис этого блока ( {} 😉 был некорректный.

Вы можете избежать этого, заканчивая текстовый комментарий символами {} (если вы не следуете правилам) или символом ; (если это объявление), чтобы дать CSS понять, что это просто шутка.

// Сделать что-нибудь {}
.

Данная публикация является переводом статьи «Single Line Comments (//) in CSS» , подготовленная редакцией проекта.

Документ не найден | htmlbook.ru

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

  1. Вы сделали что-то неправильно.
  2. Мы сделали что-то неправильно.

Если не знаете, что делать, попробуйте перейти на главную страницу сайта или воспользоваться Помощью.

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

Как и почему появляется страница с ошибкой под кодовым названием 404

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

Итак, страница с 404 ошибкой возникает в результате следующих ситуаций. И раз вы читаете данный текст, значит, находитесь в одной из них.

1. Адрес страницы набран с ошибкой

Ну, ошиблись, с кем не бывает. Посмотрите внимательно и наберите адрес еще раз. Если вы точно уверены, что набрали все правильно, переходим к следующему пункту.

2. Страница перемещена или удалена администратором сайта

Была страница, да сплыла. Может убрали ее, может переименовали, а может переместили, а может... Да все что угодно может. Потому что администратор всё, что захочет на сайте может делать. На то он и администратор! В этом случае остается только поймать его в темном углу и сказать вежливо: «Как же так! Куда страницу дел, спрашиваю в последний раз, страницу, раз твою два так, куда дел? А ну верни на место!». После чего, любой здравомыслящий человек, понимая глубину своего заблуждения и полной профнепригодности, делает перенаправление с адреса старой страницы на адрес новой. И мы довольные, можем снова набирать привычный адрес, уже не волнуясь о том, правильный он или нет.

3. Разработчик неправильно указал адрес ссылки

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

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

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


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

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

Комментарии служат двум основным целям:

• Заметки и напоминаниями

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

• «Флажки» до и после проблемных участков кода

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

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

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

/* Так записывается комментарий в коде CSS */

Комментарии CSS также могут быть разбиты на несколько строк:

/* p { font-color: black; } hr { color: red; } обе строки выше будут проигнорированы браузером, как и эта строка с текстом */

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

Автор урока Dudley Storey

Перевод — Дежурка

Смотрите также:

Комментарии в HTML-, CSS-, JS- и PHP-коде

23.07.2018 Эту статью я начну с того, для чего нужны комментарии. Предположим, что вы разрабатываете модуль со сложной структурой. Или делаете верстку с множеством вложений элементов. В таких случаях некоторые участки кода лучше всего как-то помечать – для этого и существуют комментарии. Сейчас я подробно покажу четыре типа комментариев, точнее, все их виды для четырех разных кодов.

Комментарии в HTML-разметке

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

Комментарии в CSS-стилях

Для того чтобы добавить комментарий в CSS-стили, используем: /* Текст, код или прочее */ Все, что стоит в этих тегах, не учитывается при формировании стилей, но доступно для просмотра в самом файле стилей.

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

Для добавления комментариев в JavaScript существуют два их типа. Первый тип: // Текст, код или прочее Второй тип: /* Текст, код или прочее */ Все, что стоит в этих тегах, не учитывается при выполнении скрипта, но доступно для просмотра в самом файле JavaScript.

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

Этот язык программирования, в отличие от предыдущих, имеет 3 типа комментариев. Первый тип: // Текст, код или прочее Второй тип: /* Текст, код или прочее */ И третий тип: # Текст, код или прочее Все, что стоит в этих тегах, не учитывается при выполнении скрипта и видно только в самом файле PHP.

Обратите внимание!

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

/* /* Мой код */ */ выведет вам ошибку.

2. Комментарии, которые пишутся через /* */ и , могут писаться в несколько строк:

/* Это Мой Код */ В остальных же случаях для каждой строки нужно писать специальный символ комментария, например: // Это // Мой // Код

В противном случае вы также обнаружите ошибку.

Как делать комментарии в коде?

Здравствуйте, уважаемые посетители!

В сегодняшней статье я хотела бы вам рассказать, как можно делать в html комментарии в коде, а так же в css-стилях и php-файлах.

Навигация по статье:

Привычка оставлять пометки и пояснения в коде – это одна из самых полезных привычек программиста или веб-разработчика! Так как это позволяет, во-первых вам самим лучше и быстрее ориентироваться в своём файле, а во-вторых если вы работаете в команде или планируете передавать проект на доработку – то комментарии в html-коде – это незаменимая вещь.

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

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

HTML-комментарии в коде

Для комментирования в HTML используется следующая запись:

Если вам нужно сделать пометку или обозначить какую-то область в html-файле, то html комментарии в коде будут выглядеть следующим образом:

Если же вам нужно исключить какой-то элемент на странице, то html комментарии в коде нужно поставить следующим образом:

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

Комментарии для css-стилей

CSS-комментарии делаются немного по другому:

Так же, как и для HTML если вам нужно пометить какую-то область или сделать какое-то пояснение, то можно поставить css-комментарий рядом со стилями, перед ними, или после:

/*Стили для формы обратной связи*/ .contact-form{ display:none!importan; /* Скрываем элемент с классом contact-form */ } /*Конец стилей для формы*/

/*Стили для формы обратной связи*/

.contact-form{

display:none!importan; /* Скрываем элемент с классом contact-form */

}

/*Конец стилей для формы*/

А если нужно отключить какие-то стили, то просто оборачиваем их в комментарий:

/* .class{ … } */

Комментирование в PHP

Для PHP комментарии и правила их использования так же отличаются. Так если вам нужно закомментировать какую-то одну строку или сделать пометку в теле фрагмента кода, то вам нужно использовать двойной слэш (//). Например:

Если же вам нужно закомментировать несколько строк, то для этого можно использовать символы для комментирования /* и */, такие-же как для css-стилей, но с одним отличием:

Обратите внимание! Символы комментария нужно ставить внутри фрагмента PHP-кода. Если вы поставите /* перед , то комментирование работать не будет.

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

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

А у меня на сегодня все. До встречи в следующих статьях!

С уважением Юлия Гусарь

Javascript комментирование не работает. Не можете прокомментировать комментарий?



Приветствую вас, коллеги компьютерные волшебники. Я уже много лет являюсь фантастическим программистом. Однако этого я даже с моими многолетними навыками и тренировками не могу понять. Я уверен, что это не тейпо, потому что у меня очень много внимания к деталям.

У меня была эта строка кода:

var page_background_color = 'red';

Но я решил, что не хочу использовать этот код (потому что я предпочитаю синий; он напоминает мне мой любимый вид сыра: швейцарский).

Поэтому я добавил комментарий:

//var page_background_color = 'red';

Однако потом я решила: нет, мне нравится красный! Поэтому я хочу аннулировать этот комментарий:

////var page_background_color = 'red';

Однако Стив Джобс-это дьявол , ибо комментирование явно нарушено! Как это может быть, что комментирование комментария не работает!?? Кто-нибудь, пожалуйста, скажите мне, как исправить это злоупотребление всеми вещами, которые являются благом с вычислительными элементами.

javascript colors comments
Поделиться Источник Coding Genius     12 июля 2013 в 11:14

2 ответа


  • отправка комментария не работает над новым добавленным сообщением

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

  • Как мне прокомментировать в CoffeeScript? " / * это */" не работает

    Каким образом вы можете прокомментировать CoffeeScript? В документации говорится, что вы можете использовать три символа hash для запуска и закрытия блока комментариев: ### Comments go here ### Я обнаружил, что иногда могу использовать следующие два формата `// backticks allow for...



1

вы не отменяете комментарии строк. то, что вы хотите, - это повернуть

//var page_background_color = 'red';

в

/**/var page_background_color = 'red';

и вв.

Поделиться collapsar     12 июля 2013 в 11:17



0

Прокомментировал:

//var page_background_color = 'red';
//var page_background_color
//                     = 'red';

Без комментариев:

var page_background_color = 'red';

Снова прокомментировал :

/* var page_background_color = 'red'; */
/* var page_background_color
               = 'red'; */

Подробнее читайте в спецификациях ECMAScript.

Поделиться NINCOMPOOP     12 июля 2013 в 11:21


Похожие вопросы:


MySQL комментирование

Влияет ли каким-либо образом комментирование каждого поля при создании таблиц в MySQl на производительность? Я работаю с базой данных с более чем 1000 таблицами, и почти каждое поле в каждой таблице...


Реактивный ранец не показывает одобренный комментарий

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


Комментирование внутреннего кода CSS не работает

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


отправка комментария не работает над новым добавленным сообщением

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


Как мне прокомментировать в CoffeeScript? " / * это */" не работает

Каким образом вы можете прокомментировать CoffeeScript? В документации говорится, что вы можете использовать три символа hash для запуска и закрытия блока комментариев: ### Comments go here ### Я...


Не могу прокомментировать JavaScript в Visual Studio

В функции Visual Studio 2008, a JavaScript я комментирую строку,. Это usercontrol, и я получаю его в JavaScript. Я хочу прокомментировать эту строку, но она не сработала ( независимо от...


Eclipse-как комментирование строки в Emacs

В Eclipse выделите несколько строк и нажмите Ctrl+/ , чтобы прокомментировать каждую из строк выделения. Emacs имеет функцию comment-or-uncomment-region , которая близка к тому, что я хочу, но ведет...


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

У меня есть код PHP с блоком комментариев: function foo() { $bar = true; /* Foo and bar do shopping */ // and bars goes back alone return $bar; } Теперь я хочу прокомментировать всю функцию, поэтому...


Комментирование Facebook рейтингов страниц (отзывов) через Graph API

Долгое время скрывался первый раз плакат... Мы работаем с Facebooks API для интеграции в наше веб-приложение, и мы можем получить рейтинг страницы компании с помощью параметра {open_graph_story} в...


Можем ли мы прокомментировать div с помощью javascript on button click

Можем ли мы прокомментировать div(не скрывать комментарий) с вызовом javascript при нажатии кнопки возможно ли это??? я немного попробовал, но не смог написать код для комментария возможно ли это,...

Как оформлять комментарии в html, css, php коде|Всё гениальное просто


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

Для чего нужны комментарии в исходном коде программ

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

Как оформлять комментарии на разных в HTML, CSS и PHP коде

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

Как писать комментарии в HTML-коде


Создать комментарий внутри HTML – очень легко. За это в данном языке разметки отвечает тег . Вместо "blah-b…" может быть написано абсолютно все, что угодно на любом языке (но лучше, конечно, использовать английский – так принято в программировании). Очень важный нюанс: двойной дефис ("--") внутри HTML-комментария воспринимается любым браузером, как завершение "". Это, в свою очередь, приводит к ошибке (в случае с HTML – выводу фрагмента комментария). Поэтому при создании разметки страниц следует избегать такого вида текста: "". Вместо этого лучше написать "".

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

В CSS используется другой стиль написания комментариев. Он выглядит следующим образом: /* пример комментария */. Все, что находится внутри двух символов (слеша и звездочки) игнорируется браузером. Такие комментарии являются многострочными. То есть интерпретатор будет игнорировать все написанное до той поры, пока не встретит "*/". Если требуется закомментировать какой-то параметр внутри CSS-кода, то необязательно использовать достаточно громоздкий вид комментариев, указанный выше. Можно просто поставить вначале строки какой-нибудь символ, например, тильду (~).

Как сделать комментарии в PHP-коде

При написании скриптов на PHP можно пользоваться тремя стилями комментариев. Первый из них такой же, как в CSS: /* текст */, и он тоже является многострочным. Если требуется нужно закомментировать только одну строку, то можно использовать два слеша: //. Также в этом языке реализован Unix-подобный стиль: # (решетка). Все, что присутствует на линии после соответствующих одного из указанных знаков игнорируется при исполнении кода. Важно: в PHP нельзя допускать вложенных комментариев: /* … /* … */ … */. Также при размещении скрипта в HTML-коде комментарии, предназначенные для PHP, нужно писать в блоке с соответствующими инструкциями, то есть после "".

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

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

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

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

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

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

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

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

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

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

Пример¶

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

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

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

Пример¶

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

Пример¶

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

Комментарии в Less | WebReference

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

Less поддерживает два типа комментариев: многострочные и однострочные.

Многострочные комментарии

Чтобы закомментировать блок кода поместите его между /* и */.

/* 
  style.less
  Версия 1.0
*/

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

Однострочные комментарии начинаются с // и всё, что идёт после этих символов Less игнорирует. Так что эта форма иногда применяется для быстрого отключения отдельных свойств.

@size: 200px; // Ширина и высота элемента

Вложенные комментарии

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

/* 
  // style.less
  // Версия 1.0
*/
// Используйте /* */ для комментирования

Однако одинаковый тип комментария внутри другого не допустим. Ниже показан пример, который приведёт к ошибке.

/* 
/* Так делать нельзя! */
*/

Специальные комментарии

Любые комментарии в итоговом CSS-файле удаляются, но иногда комментарий нужно оставить, например, информацию об авторских правах или важное пояснение. Для таких комментариев применяется специальная форма /*! !*/.

/*! Этот комментарий будет сохранён. !*/
/* А этот нет. */

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

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 11.03.2020

Редакторы: Влад Мержевич

Что вам нужно знать о комментариях в CSS

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

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

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

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

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

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

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

Вот код CSS:

 
 

/ * Установить белый цвет текста и оттенок бирюзового фона * /

п {

цвет: белый;

цвет фона: # 2594A4;

}

Вы также можете отформатировать их как многострочные комментарии, как показано в приведенном ниже коде.

Вот код CSS:

 
 

п {

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

цвет фона: # 2594A4; / * Установить цвет фона на оттенок бирюзового * /

}

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

Вот HTML:

 
 

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

Этот абзац оформлен с помощью CSS.Оба свойства font-color и background-color были установлены таким образом, что цвет шрифта - белый, а цвет фона - оттенок бирюзового.

Вот результат:

Источник изображения

Если вы используете CSS-фреймворк Bootstrap вместо создания веб-сайта с нуля, комментирование по-прежнему работает точно так же.

Вот код CSS, который остался прежним:

 
 

п {

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

цвет фона: # 2594A4; / * Установить цвет фона на оттенок бирюзового * /

}

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

 
 

Комментирование в Boostrap CSS

Как и в примере выше, этот абзац оформлен с помощью CSS. Оба свойства font-color и background-color были установлены так, что цвет шрифта - белый, а цвет фона - оттенок бирюзового.

Ниже приведен результат. Примечание. Единственная разница во внешнем интерфейсе - это семейство шрифтов, которое задается глобально в Bootstrap.

Источник изображения

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

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

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

 
 

п {

цвет: белый;

цвет фона: # 2594A4;

}

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

Вот код CSS:

 
 

п {

/ * цвет: белый; * /

цвет фона: # 2594A4;

}

Вот HTML:

 
 

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

Этот абзац оформлен с помощью CSS.В то время как свойство font-color было «закомментировано», свойство background-color - нет. Это означает, что цвет шрифта остается черным, но цвет фона меняется на приятный бирюзовый.

Вот результат:

Источник изображения

Теперь мы рассмотрим пример того, как весь набор правил закомментирован.

Вот код CSS:

 
 

/ *

п {

цвет: белый;

цвет фона: # 2594A4;

}

* /

Вот HTML:

 
 

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

Этот абзац оформлен с использованием CSS, который был "закомментирован"."Фактически это означает, что CSS отменен, поэтому HTML выглядит без стиля.

Вот результат:

Источник изображения

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

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

Пример комментария CSS - Как закомментировать CSS

Комментарии используются в CSS для объяснения блока кода или для внесения временных изменений во время разработки. Закомментированный код не выполняется.

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

  / * Это однострочный комментарий * /
.group: after {
  содержание: "";
  дисплей: таблица;
  ясно: оба;
}

/ *
  Это
  многострочный
  комментарий
* /  

Вы также можете сделать свои комментарии более удобочитаемыми, стилизовав их:

  / *
***
* РАЗДЕЛ ДЛЯ СТИЛЯ h3
***
* Абзац с информацией
* что было бы полезно для кого-то
* кто не писал код.
* Звездочки вокруг абзаца
* помочь сделать его более читабельным.
***
* /  

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

  / *
* СОДЕРЖАНИЕ CSS
*
* 1.0 - Сброс
* 2.0 - Шрифты
* 3.0 - Глобалы
* 4.0 - Цветовая палитра
* 5.0 - Заголовок
* 6.0 - Кузов
* 6.1 - Ползунки
* 6.2 - Изображения
* 7.0 - Нижний колонтитул
* /

/ *** 1.0 - Сброс *** /

/ *** 2.0 - Шрифты *** /

/ *** 3.0 - Глобальные *** /

/ *** 4.0 - Цветовая палитра *** /

/ *** 5.0 - Заголовок *** /

/ *** 6.0 - Кузов *** /
h3 {
  размер шрифта: 1.2em;
  семейство шрифтов: "Ubuntu", serif;
  текст-преобразование: прописные буквы;
}

/ *** 5.1 - Ползунки *** /

/ *** 5.2 - Изображения *** /

/ *** 7.0 - Нижний колонтитул *** /  

Еще немного о CSS:

Синтаксис и селекторы CSS

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

Есть два основных способа написать CSS.

Встроенный CSS

Особенности специфики CSS: Уловки CSS

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

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

Вот пример встроенного CSS.Слова «Один» и «Два» будут иметь желтый цвет фона и красный цвет текста. Слово «Три» имеет новый стиль, который заменяет первый, и имеет зеленый цвет фона и голубой цвет текста. В этом примере мы применяем стили к тегам

, но вы можете применить стиль к любому элементу HTML.

  
Один
Два
Три

Внутренний CSS

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

Внутренний CSS имеет стили, указанные в теге

Один
Два
Три
Четыре

Селекторы, показанные выше, чрезвычайно просты, но могут оказаться довольно сложными.Например, можно применять стили только к вложенным элементам; то есть элемент, являющийся дочерним по отношению к другому элементу.

Вот пример, в котором мы указываем стиль, который должен применяться только к элементам div , которые являются прямым потомком других элементов div . В результате «Два» и «Три» появятся в виде красного текста на желтом фоне, но «Один» и «Четыре» останутся неизменными (и, скорее всего, черный текст на белом фоне).

  

Один
Два
Три
Четыре

Внешний CSS

Все стили имеют свой собственный документ, который связан в теге .Расширение связанного файла - .css

.

Простое руководство по добавлению комментария CSS

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

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

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

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

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

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

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

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

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

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

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

Если свойство background-color закомментировано, значение голубого цвета не будет использоваться как часть предоставленного кода CSS, давая следующий результат.

Теперь, если теги комментариев CSS снова удалены из раздела кода;

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

Многострочные комментарии CSS

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

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

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

Это упрощает чтение и понимание комментария, и он умещается в компактной области, а не растягивается на одной строке.

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

Структура и дизайн комментария CSS

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

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

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

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

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

Больше информации: вперед и вверх!

Работа в веб-дизайне предоставляет множество возможностей для развития различных других навыков. Пути к изучению этих навыков можно найти прямо здесь, в блоге Udacity! Ознакомьтесь с легкими для чтения вводными курсами по таким темам, как HTML и JavaScript, которые идут рука об руку с отличными навыками веб-дизайна.

Вы можете даже пойти дальше с концепциями в UI / UX-дизайне, чтобы действительно принести домой весь дизайн-пакет. Какой бы путь вы ни выбрали, комментарии будут ключевым аспектом. Умение добавлять комментарии к своей работе важно не только с точки зрения коммуникации, но и для вашей личной заботы.

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

____________________________________________________________________________________

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

Начать обучение

Насколько хороши ваши комментарии HTML и CSS?

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

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

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

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

  1. Комментарии игнорируются браузером.
  2. Комментарии удаляются во время минификации.

Основываясь на этих двух фактах, мы знаем, что комментарии на самом деле не предназначены для машин - они предназначены для чтения людьми .

Почему код комментариев важен

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

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

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

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

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

Комментарии способствуют более эффективному сотрудничеству. Если вы знаете все тонкости проекта или кодовой базы, у вас больше шансов выполнить отдельные части быстрее, что улучшит рабочие процессы.

Комментарии помогают многим людям. Они не только помогают себе, но и могут помочь другим людям в вашей команде. Прошли те времена, когда мы видели комментарии вроде НЕ ВРАЩАЙТЕ МОЙ КОД в исходном коде людей.Раньше мы очень защищали наш код, не желая делиться своими «секретами», но теперь мы живем в мире, где люди делятся кодом, вместе работают над проектами и сотрудничают. Когда речь заходит о веб-проектах, мы не стесняемся упоминать Гарри Робертса, Криса Койера или Джонатана Снука. С этим сдвигом в сотрудничестве мы также должны принять во внимание нашу практику комментирования - и помочь нашим коллегам.

Чего следует избегать, когда дело доходит до комментариев

Не комментируйте абсолютно все

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

Возможно, именно здесь и возникла концепция «хороший код не нуждается в комментариях». Не следует полностью избегать комментариев, их следует использовать только при необходимости.

Не говорите слишком многословно

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

Делайте имена классов как можно короче, но настолько длинными, насколько это необходимо.

То же самое и с комментариями. Любые комментарии, которые вы пишете, полезно перечитывать, чтобы убедиться, что вы сами их понимаете. Представьте, что вы новичок в коде и читаете комментарии в качестве руководства.

Не тратьте слишком много времени на написание комментариев

Однажды я увидел файл в проекте, над которым я работал, у которого была строка в верхнем чтении:

 
  

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

Некоторые примеры того, когда использовать комментарии

Объяснение назначения псевдоэлемента

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

  .post__comment-container :: after {
  цвет фона: # f9f9f9;
  граница: 1px solid #dedede;
  радиус границы: 0,25 м;
  цвет: # 888;
  content: «Автор сообщения»;
  дисплей: встроенный блок;
  размер шрифта: 0,7 бэр;
  левое поле: 0,5 бэр;
  набивка: 0,2 бэр, 0,45 бэр;
  вертикальное выравнивание: по центру;
}  

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

 

.post__comment-container :: after {
  цвет фона: # f9f9f9;
  граница: 1px solid #dedede;
  радиус границы: 0,25 м;
  цвет: # 888;
  content: «Автор сообщения»;
  дисплей: встроенный блок;
  размер шрифта: 0,7 бэр;
  левое поле: 0,5 бэр;
  набивка: 0,2 бэр, 0,45 бэр;
  вертикальное выравнивание: по центру;
}  

Объяснение вложенного блока кода

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

 .c-segment-controls.is-active {
  .c-segment-controls__panel {
    цвет фона: #fafafa;
    граница: 1px solid #aaa;
    непрозрачность: 1;
    переход: непрозрачность 0,5 с легкость;
  }
}  

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

  .c-segment-controls.is-active {

  

  .c-segment-controls__panel {
    цвет фона: #fafafa;
    граница: 1px solid #aaa;
    непрозрачность: 1;
    переход: непрозрачность 0.5s легкость;
  }
}  

Чтобы объяснить, почему может потребоваться код

! Important

Мы часто видим ! Important и предполагаем, что смотрим на устаревший код или грязный взлом:

  .c-accordion-container.ng-hide {
  отображение: блок! важно;
}  

При ближайшем рассмотрении мы просто переопределяем поведение фреймворка по умолчанию.

 

.c-accordion-container.ng-hide {
  отображение: блок! важно;
}  

Чтобы объяснить, почему блок кода был закомментирован, а не просто удален

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

 

  

Но если мы удалим его, кто-то вообще может даже не знать о его существовании. Было бы неплохо оставить это здесь:

 



  

Прочая документация

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

Сообщения о фиксации

При использовании контроля версий (например, Git) мы можем взять то, что мы знаем о написании полезных комментариев в коде, и применить это к нашим сообщениям о фиксации.

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

  совершить 2faa2
    протереть
совершить 591ad
    пытался исправить какую-то странную коробку
совершить af830
    заставил треугольник работать
совершить bd02a
    рефакторинг
совершить bed4b
    исправление навигации
совершить 22fe0
    упс  

Более точный пример описал бы с помощью глагола задачу, выполненную в коммите.Различные второстепенные задачи будут распределены по разным коммитам.

  совершить 2faa2
    Добавление корпуса компонента формы
совершить 591ad
    Устранение проблемы с размером коробки
совершить af830
    Реализация треугольника для всплывающей подсказки
совершить bd02a
    Элемент списка рефакторинга для меньших окон просмотра
совершить bed4b
    Исправление проблемы с плавающей точкой навигации
совершить 22fe0
    Исправление опечаток в названиях классов  
У

Karma есть довольно простое руководство по написанию лучших коммитов, тогда как у Криса Бимса есть очень подробное руководство.Дэвид Демари даже написал статью под названием «Искусство совершения». Сообщения коммитов определенно заслуживают внимания.

Запросы на извлечение

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

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

  • Номер билета, номер задачи или номер вопроса
  • Кратко опишите задачу
  • Укажите, какие типы файлов я изменил
  • Если это была ошибка, укажите, какой была ошибка до и после изменений.
  • Опишите ожидаемое поведение после изменений (должно ли оно быть таким же?)
  • Перечислите все шаги, которые необходимо предпринять для проверки изменений в браузере или в коде
  • Обратите внимание на все, что следует игнорировать, например, на ошибку, исправленную в другой ветке.
  • При необходимости включите снимки экрана интерфейса

Этот пример относительно прост, и вам определенно не нужно включать все в приведенный выше список, если в этом нет необходимости:

Заключение

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

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

Соблюдаете ли вы какие-либо рекомендации по комментированию кода? Или, может быть, вы работаете в компании, у которой есть другая, но эффективная документация?

Синтаксис

- это плохая практика комментировать отдельные строки CSS с помощью //?

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

# 1 Не стандарт

Стандартизирован, по крайней мере, начиная с CSS 2.1, комментарии должны быть заключены ТОЛЬКО в / * и * / . Хотя некоторые браузеры допускают // , они не должны этого делать и находятся всего в одном дюйме от кого-то, кто говорит «о да, это нестандартно» или «эй! Это нестандартно, исправьте!»; а затем угадайте, что ваш CSS-код, который БЫЛ РАБОТАЛ, теперь не подходит для тысяч людей (и, возможно, уже не работал для сотен других).Я добавлю, что и -> разрешены, но только (и я имею в виду ТОЛЬКО), когда они появляются в документе HTML, а не в исходном файле .css. Если ваш браузер настолько старый, что не может пропустить более тегов