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

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

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

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

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

<div id="container">

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

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

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

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

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

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

* * *

На блоге RunetJob.ru организован интересный конкурс — автор задал известным блоггерам вопрос: «Какое твое видение будущего блогосферы?» и ваша задача — угадать, кому из них принадлежит каждый из ответов, которые тоже, кстати, очень интересны. А Сибиряк рассказал, как в посты WordPress-блога по-человечески вставить контекстные блоки Бегуна или Яндекс.Директа.

* * *

Компания «АКВАВЭЙ», являющаяся одной из лидирующей в своей области, предлагает услуги частным лицам и предприятиям: проектирование и монтаж систем водоснабжения (теплоснабжения, водоотведения), установка систем очистки воды и ряд других услуг.

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

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

    < !–-start blockname-–>

    код блока

    < !–-end blockname-–>

  2. 2
    kuindzi

    Почти не комментирую. Иногда использую схему примерно описываемую Вами.

  3. 3
    ВЕБмастер

    Безусловно комментарии нужны! ИМХО
    Не так давно, но я все же стал их использовать, по-моему очень удобно!

  4. 4

    to Фёдор Аксёнов
    по моему проблемы с рендерингом встречаются достаточно редко
    на моей практике только при вставки комментариев между float блоками.

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


    <!-- BEGIN #wrapper --><br />
    <div id="wrapper"><br />
    <div id="header"> <br />
    </div><!-- END #header --><br />
    <br />
    <div id="content"><br />
    </div><!-- END #content --><br />
    <br />
    <div id="footer"><br />
    </div><!-- END #footer --><br />
    </div><br />
    <!-- END #wrapper --><br />

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


    <!-- END #similar-video --><br />
    <!-- END .similar-video -->

    Было бы интересно послушать как кто комментирует свои CSS файлы;)

  5. 5

    Я комментирую так (извините сопру кусок чужого кода :)):

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

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

    А вот разделение на классы и ID по # и . я пожалуй возьму на вооружение :)

  6. 6
    Alex

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

  7. 7

    Ага, примерно также делаю. Только для подобных блоков в 90% именно идентификаторы, так что решетку или точку не ставлю. А ещё я однажды круто обломался с русскими комментариями в CSS, теперь там только на инглише пометки делаю.

  8. 8

    А ещё я однажды круто обломался с русскими комментариями в CSS, теперь там только на инглише пометки делаю.

    А ты сохраняй CSS-файл в кодировке UTF-8, тогда обломов с русскими комментами не будет ;) Я, кстати, тоже их всегда на инглише пишу.

  9. 9

    Я всегда в UTF-8 работаю. С русскими комментариями просто очередной специфичный глюк IE, поищи в сети, была информация где-то.

  10. 10

    Я читал где-то эту инфу, только уже подзабыл, что там конретно рассказывалось. Думал, что юникод как раз и решит проблему в IE. Значит че-то путаю.

  11. 11

    можно и не комментировать вообще… просто отделять блоки.

  12. 12
    egger

    идентификаторы решётку и точку ставить нада …

  13. 13

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

  14. 14
    t1myrkq

    возьму на заметку. я так пишу:

     <div class="class">
     <div id="id">
     </div><!--/id -->
     </div><!--/class -->
    

    в твоих комментах смысла больше.

  15. 15

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

    Контент

  16. 16
    Vetlan
    @

    В хтмл комментирую только закрывающий тег.
    В цссе пишу на инглише, тоже обжегся на ие6.
    Еще разделяю блоки в цсс пустым символом » *{}». Так удобнее смотреть на структуру блоков в панельке визавинга. Видно где блок начинается и заканчивается.

  17. 17

    Я иногда пишу комментарии в транслите русские слова.

  18. 18
    LX
    @

    Для комментирования СМЫСЛОВЫХ блоков использую конструкцию:

    <!-- <Main content with left menu and news block> -->
    <div id="center">
     <div id="left_menu">…</div>
     <div id="content">…</div>
     <div id="news">…</div>
    </div>
    <!-- </Main content with left menu and news block> -->
    

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

  19. 19
    Антон
    @

    Я комментирую вот так:



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