Комментарии в CSS — CSS — Дока
Кратко
Секция статьи «Кратко»Комментарии в 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 использует тот же синтаксис «блока комментариев», что и языки семейства 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 понять, что это просто шутка.
// Сделать что-нибудь {} .foo { animation: bar 1s infinite; } /* Теперь все правильно! */
Внимательный читатель может понять (или он просто знал это и раньше), что символ / / используется вовсе не для вставки комментариев.
На самом деле, он служит для того, чтобы, опираясь на правила устранения ошибок CSS, заблокировать в таблице стилей некорректный код, чтобы затем переписать его корректно.
Вадим Дворниковавтор-переводчик статьи «Single Line Comments (//) in CSS»
Синтаксис. Является ли плохой практикой ставить перед отдельными строками CSS префикс // в качестве стиля личного комментария?
Я вижу, что было/есть много людей, жалующихся на это, и, поскольку это старый вопрос, вероятно, многие люди читают его, задаваясь вопросом, верен ли он до сих пор или существует ли на самом деле стандарт. . Позвольте мне очистить воздух. Ниже приведены основные причины строгой политики комментариев CSS:
#1 Это не является стандартом
Стандартизирован, по крайней мере, начиная с CSS 2.1, комментарии должны заключаться ТОЛЬКО в /*
и */
. В то время как некоторые браузеры допускают //
, они не должны этого делать, и находятся всего в одном дюйме от того, кто скажет: «О, да, это нестандартно» или «Эй! Это нестандартно, исправь это!»; а затем угадайте, что ваш код CSS, который БЫЛ работает, теперь не работает для тысяч людей (и, возможно, уже не работает для сотен других). Я добавлю, что
разрешены, но только (и я имею в виду ТОЛЬКО), когда они появляются в документе HTML, а не в исходном файле .css. Если ваш браузер настолько устарел, что не может пропустить более тегов,наверное,пришло время для нового браузера 10-летней давности. Даже Lynx и другие текстовые браузеры знают,что их нельзя читать,поэтому комментирование полезно только в очень изолированной ситуации,когда аппаратное и программное обеспечение не имеет выхода к морю в своем текущем рабочем состоянии.
#2 Это не (очень) кросс-платформенный
Однострочный комментарий,который начинается в любом месте строки с //
,заканчивается символом «новой строки»,который является/не является кросс-платформенным стандартизированным символом (с). Хуже того,у некоторых может быть один символ для новой строки или 2... и когда эти платформы смешиваются вместе,новая строка может быть потеряна,и ваш терминатор исчезнет... и часть или весь ваш код теперь закомментирован,что не должно было быть,вам не нужно быть гением,чтобы знать,к каким последствиям это может привести,особенно если вы управляете функциями своего сайта исключительно с помощью CSS,что многие делают.
#3 Стандарт дружелюбен и един для всех
Разделители ВСЕГДА будут одними и теми же символами на КАЖДОМ компьютере,независимо от архитектуры,операционной системы и т. д.
#4 Новые строки являются пробелами
Последняя причина (да,есть еще одна) заключается в том,что символы новой строки считаются (в CSS и многих других языках) пробелами,а */
не являются пробелами,не так ли? И если вы подумаете об этом в этот момент,должно быть довольно ясно,что вы НЕ должны использовать пробелы для завершения комментария,тем более что пробелы могут быть удалены многими парсерами HTML/CSS или переформатированы без вашего ведома об этом.
#5 CSS !=C/C++
Теперь,если вы собираетесь вскочить со своего места и заорать на меня о "Эй, но C++. ..",помните,что эти компиляторы и IDE имеют тонны проверки и обнаружения новой строки встроенный в них,чтобы они могли принять его. Большинство компиляторов не переформатируют ваш код,если их об этом не просят,и многие IDE обычно спрашивают вас,какие символы новой строки используются в вашем документе,если они не могут догадаться сами. Если бы мы делали это со страницами CSS для конечного пользователя каждый раз,когда они загружались,представьте себе кошмар,который они пытались бы обойти. Кроме того,код C/C++не анализируется во время выполнения,а компилируется,поэтому большую часть времени пользователь вообще не получает рассматриваемый документ. Исходные файлы не просматриваются постоянно всем миром на сотнях платформ и во множестве операционных систем,а также в миллионе различных браузеров. Комментарии удаляются до того,как они попадут к конечному пользователю. Источник CSS поступает прямо в браузер пользователя и должен быть очень устойчивым,не зная,что находится на другой стороне,поэтому предостережение в том,что он должен быть готов ко всему,что есть или делает конечный пользователь,а не ко всему,что делает или делает разработчик!
#6 Это неудобно
Нет,это очень раздражает необходимость вводить лишние */
,но вина за это в основном лежит на разработчиках программного обеспечения для редактирования CSS,которые не предлагают автодополнение.Если вы используете специализированный редактор,который может это сделать,желательно из коробки,то вы обнаружите,что это так же просто,как использовать //
. Возьмите за привычку набирать
,а затем клавишу Backspace 2,это поможет вам не забыть и немного облегчит задачу. Более того,вы можете настроить горячую клавишу,чтобы просто заложить их для вас. Windows и Linux имеют мощные инструменты для этого (KDE очень хорош для этого).
Я надеюсь,что это поможет всем понять «почему» за «как»,и помнить,что то,что работает для вас,не означает,что это стандарт,и в итоге:
ДА,ЭТО ПЛОХАЯ ПРАКТИКА,просто скажите НЕТ двойной косой черте!!! Если вам нужно наглядное пособие,чтобы напомнить вам об этом важном факте,просто запишите себе в память этот образ (спасибо тем из вас,кому больше нечем заняться,кроме как рисовать такие картинки):
PS:Если вы действительно хотите что-то пожаловаться тем,кто создает/нарушает стандарты CSS (W3C,локоть),кто-то начинает дискуссию о том,насколько излишне длинным и неправильным является ключевое слово «!important»! Но это не является частью этого вопроса,поэтому я не буду вдаваться в подробности.
Ссылки
- W3C :Рабочий проект CSS 2.1:символы комментариев.
- W3C :Уровень синтаксического модуля CSS 3:железнодорожные диаграммы интерпретаций парсер-символ.
- Переполнение стека :Различные статьи о переполнении стека практически на ту же тему,что и эта.
- w3schools :Стандарт синтаксиса CSS 3 (который,в свою очередь,ссылается на W3C).
- sitepoint :Синтаксическая аннотация CSS «без использования двойной косой черты».
- mozilla|mdn :упрощенная обработка CSS 3 позволяет использовать двойную косую черту во входных файлах.
Что такое сочетание клавиш для комментирования строк для CSS в Aptana Studio?
спросил
Изменено 5 лет,1 месяц назад
Просмотрено 23 тысячи раз
Какое сочетание клавиш используется для комментирования строк CSS в Aptana Studio?
- аптана
0
Для Aptana Studio 3.x технически привязка клавиш M1+/для переключения комментариев. Это переводится как Command+/на Mac,Ctrl+/на большинстве других платформ. Эта команда должна работать на любом языке.
это можно сделать нажав ctrl+7
Ctrl +/у меня работает!!! (Windows 10+CCS 7)
Мне очень не хватает комментирования с помощью ярлыка Aptana 3.
на шахтах. Действие,приведенное на Ctrl +/,говорит:
Команда:Комментарий Python Toggle
Связывание:Ctrl +/
,когда:PYDITR EDTITOR EDTITOR.
1
CSS допускает только многострочные комментарии. В Aptana 3 просто выберите регион,который вы хотите закомментировать,и используйте ctrl +shift +/.