Как вы комментируете логические блоки в разметке страницы?

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

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

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

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

На практике я испробовал несколько вариантов комментирования кода и в результате пришел к следующему варианту, который мне кажется наиболее осмысленным:

<div id="container">

	<div class="block">
		здесь много кода и контента
	</div><!-- .block -->

</div><!-- #container -->

Чем удобен данный вариант:

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

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

P.S. Вообще, было бы очень интересно узнать, сколько верстальщиков меня читают. Верстальщики! По порядку рассчитайсь!.. =)

Комментарии (40)

Zigzag
19 апреля 2008 г. в 15:07
Я вообще не комментирую свой код, т.к. работаю с ним в 99% случаев только я сам. Но твой способ мне понравился, возьму на заметку.
Эзотерик
19 апреля 2008 г. в 15:26
Последнее время стараюсь комментить парными тегами, мне так удобнее. Причем коммент лучше не лесенкой делать, как значимый код страницы, а всегда слева без отступов. Так проще видеть начало и конец блока.

код блока
kuindzi
19 апреля 2008 г. в 16:30
Почти не комментирую. Иногда использую схему примерно описываемую Вами.
ВЕБмастер
19 апреля 2008 г. в 21:29
Безусловно комментарии нужны! ИМХО
Не так давно, но я все же стал их использовать, по-моему очень удобно!
DreamLikeMe
19 апреля 2008 г. в 21:56
to Фёдор Аксёнов
по моему проблемы с рендерингом встречаются достаточно редко
на моей практике только при вставки комментариев между float блоками.

Сам пользуюсь комментариями вот таким образом:
есть темплейт xtml файла в котором уже есть комментарии к основным блокам

<br /> <div id="wrapper"><br /> <div id="header"> <br /> </div><br /> <br /> <div id="content"><br /> </div><br /> <br /> <div id="footer"><br /> </div><br /> </div><br /> <br />

при наличии большого количества кода в блоках или вложенности использую

<br /> 

Было бы интересно послушать как кто комментирует свои CSS файлы;)
Steward
21 апреля 2008 г. в 08:48
Я комментирую так (извините сопру кусок чужого кода :)):

<div id="wrapper"><br /> <div id="header"><br /> </div><br /> <br /> <div id="content"><br /> </div><br /> <br /> <div id="footer"><br /> </div><br /> </div><br /> <br />

А знаете зачем слово END в конце – просто потому что при поиске (в большинстве редакторов) я просто нажимаю Ctrl+F, ввожу #wrapper а потом для поиска конца нажимаю F3 – по-моему очень удобно.

А вот разделение на классы и ID по # и . я пожалуй возьму на вооружение :)
Alex
21 апреля 2008 г. в 21:47
Комментариев не оставляю, делаю структуру кода вложенной, поэтому быстро ориентируюсь. Комментарии оставляю только если об этом просят заранее. Но все же думаю комменты нужны, и делать их думаю нужно как в начале блока так и в конце.
Тормоз
23 апреля 2008 г. в 03:21
Ага, примерно также делаю. Только для подобных блоков в 90% именно идентификаторы, так что решетку или точку не ставлю. А ещё я однажды круто обломался с русскими комментариями в CSS, теперь там только на инглише пометки делаю.
Dimox
23 апреля 2008 г. в 12:29
А ещё я однажды круто обломался с русскими комментариями в CSS, теперь там только на инглише пометки делаю.

А ты сохраняй CSS-файл в кодировке UTF-8, тогда обломов с русскими комментами не будет ;) Я, кстати, тоже их всегда на инглише пишу.
Тормоз
23 апреля 2008 г. в 12:41
Я всегда в UTF-8 работаю. С русскими комментариями просто очередной специфичный глюк IE, поищи в сети, была информация где-то.
Dimox
23 апреля 2008 г. в 12:57
Я читал где-то эту инфу, только уже подзабыл, что там конретно рассказывалось. Думал, что юникод как раз и решит проблему в IE. Значит че-то путаю.
бизнесмен Kozzi
23 апреля 2008 г. в 16:48
можно и не комментировать вообще… просто отделять блоки.
egger
24 апреля 2008 г. в 18:33
идентификаторы решётку и точку ставить нада …
Светик
26 апреля 2008 г. в 15:44
Не знаю, лично я никогда не комментирую код, просто отступаю побольше пустых строчек.
t1myrkq
30 апреля 2008 г. в 23:55
возьму на заметку. я так пишу:
```
 <div class="class">
   <div id="id">
   </div>
 </div>
```
в твоих комментах смысла больше.
webmolot
2 мая 2008 г. в 12:33
Когда делаю проект для себя, то не комментирую, в своем коде как рыба в воде.
Но, когда делаю заказ и потом свою верстку передаю заказчику, ключевые блоки комментирую, т.к. забочусь о програмере, который потом будет работать с моим творением :).
Такой вариант мне кажется наглядным и компактным:

Контент
Vetlan
15 мая 2008 г. в 12:01
В хтмл комментирую только закрывающий тег.
В цссе пишу на инглише, тоже обжегся на ие6.
Еще разделяю блоки в цсс пустым символом ” *{}”. Так удобнее смотреть на структуру блоков в панельке визавинга. Видно где блок начинается и заканчивается.
Mons
27 мая 2008 г. в 13:25
Я иногда пишу комментарии в транслите русские слова.
LX
12 июня 2008 г. в 21:36
Для комментирования СМЫСЛОВЫХ блоков использую конструкцию:
```

<div id="center">
    <div id="left_menu">…</div>
    <div id="content">…</div>
    <div id="news">…</div>
</div>

```
P.S.: Сделайте препросмотр комментария и его сохранение про ошибке (например, забыл ввести сумму цифр защиты от спама) :о)
Антон
10 ноября 2009 г. в 04:40
Я комментирую вот так:

…

Комменты хороши тем, что выделяются в коде своей подсветкой. Глаз сразу видит, где какой блок находится.
1. Антон
  10 ноября 2009 г. в 04:48 / ответ на коммент Антон
  В css вот так:
  /* Header
  ————————————————*/
  …
  /* Generic
  ————————————————*/
  /* typographics */
  …
  /* bla-bla */

Как вы комментируете логические блоки в разметке страницы?

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

Как должен выглядеть сайт при отключенных изображениях

5 советов верстальщику

Верстка красивых тегов для сайта + бонус

Зеленый свет CSS-свойствам при верстке под IE8 и выше

Комментарии (40)

Ваш комментарий