Как вы комментируете логические блоки в разметке страницы?
В процессе верстки я постоянно стараюсь совершенствовать свои навыки. Касается это и комментариев, которыми я помечаю блоки в разметке страниц.
Было время, когда я вообще ничего не комментировал в коде, но позже осознал, что с ними гораздо удобнее просматривать код, т.к. становится проще разобрать, где заканчивается тот или иной логический блок. К тому же комментарии помогут сориентироваться заказчику, поскольку верстку, как правило, “натягивают” на какой-либо движок.
Причем, я считаю, что имеет смысл комментировать только те блоки, которые содержат в себе много кода/текста, т.е. когда в текстовом редакторе они занимают примерно половину экрана или больше.
На практике я испробовал несколько вариантов комментирования кода и в результате пришел к следующему варианту, который мне кажется наиболее осмысленным:
1 2 3 4 5 6 7 | <div id="container"> <div class="block"> здесь много кода и контента </div><!-- .block --> </div><!-- #container --> |
Чем удобен данный вариант:
- Комментарий показывает название идентификатора или класса, используемого для данного блока, т.е. комментарий <!– #container –> говорит мне, что это блок с идентификатором container, а комментарий <!– .block –> - что это блок с классом block. Т.е. становится проще найти начало блока.
- Комментарий не занимает ни одной лишней строки. В этом нет необходимости, поскольку комментарий содержит название класса или идентификатора и нет смысла повторять его перед началом блока, и он ставится в строку с закрывающимся тегом для данного блока.
- Подобный комментарий визуально выглядит приятно.
А теперь хотелось бы, собственно, получить ответ на вопрос, обозначенный в теме поста. Если вы в той или иной степени являетесь верстальщиком, то как комментируете разметку вы и делаете ли это вообще? И, если возможно, обоснуйте свою позицию с точки зрения практичности. Может быть вы мне подскажете что-то более разумное, чем я указал выше.
P.S. Вообще, было бы очень интересно узнать, сколько верстальщиков меня читают. Верстальщики! По порядку рассчитайсь!.. =)
* * *
На блоге RunetJob.ru организован интересный конкурс - автор задал известным блоггерам вопрос: “Какое твое видение будущего блогосферы?” и ваша задача - угадать, кому из них принадлежит каждый из ответов, которые тоже, кстати, очень интересны. А Сибиряк рассказал, как в посты WordPress-блога по-человечески вставить контекстные блоки Бегуна или Яндекс.Директа.
* * *
Компания «АКВАВЭЙ», являющаяся одной из лидирующей в своей области, предлагает услуги частным лицам и предприятиям: проектирование и монтаж систем водоснабжения (теплоснабжения, водоотведения), установка систем очистки воды и ряд других услуг.
можно и не комментировать вообще… просто отделять блоки.
идентификаторы решётку и точку ставить нада …
Не знаю, лично я никогда не комментирую код, просто отступаю побольше пустых строчек.
возьму на заметку. я так пишу:
2
3
4
<div id="id">
</div><!--/id -->
</div><!--/class -->
в твоих комментах смысла больше.
Когда делаю проект для себя, то не комментирую, в своем коде как рыба в воде.
Но, когда делаю заказ и потом свою верстку передаю заказчику, ключевые блоки комментирую, т.к. забочусь о програмере, который потом будет работать с моим творением :).
Такой вариант мне кажется наглядным и компактным:
<!– Контент –>
<div>
Контент
</div>
<!– / Контент –>
В хтмл комментирую только закрывающий тег.
В цссе пишу на инглише, тоже обжегся на ие6.
Еще разделяю блоки в цсс пустым символом ” *{}”. Так удобнее смотреть на структуру блоков в панельке визавинга. Видно где блок начинается и заканчивается.
Я иногда пишу комментарии в транслите русские слова.
Для комментирования СМЫСЛОВЫХ блоков использую конструкцию:
2
3
4
5
6
7
<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.: Сделайте препросмотр комментария и его сохранение про ошибке (например, забыл ввести сумму цифр защиты от спама) :о)
Я комментирую вот так:
<wrapper><!– Wrapper –>
…
</wrapper><!– End of wrapper –>
<div class=”deco”><!– Deco –></div>
Комменты хороши тем, что выделяются в коде своей подсветкой. Глаз сразу видит, где какой блок находится.
В css вот так:
/* Header
————————————————*/
…
/* Generic
————————————————*/
/* typographics */
…
/* bla-bla */