Как вы комментируете логические блоки в разметке страницы?
В процессе верстки я постоянно стараюсь совершенствовать свои навыки. Касается это и комментариев, которыми я помечаю блоки в разметке страниц.
Было время, когда я вообще ничего не комментировал в коде, но позже осознал, что с ними гораздо удобнее просматривать код, т.к. становится проще разобрать, где заканчивается тот или иной логический блок. К тому же комментарии помогут сориентироваться заказчику, поскольку верстку, как правило, “натягивают” на какой-либо движок.
Причем, я считаю, что имеет смысл комментировать только те блоки, которые содержат в себе много кода/текста, т.е. когда в текстовом редакторе они занимают примерно половину экрана или больше.
На практике я испробовал несколько вариантов комментирования кода и в результате пришел к следующему варианту, который мне кажется наиболее осмысленным:
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-блога по-человечески вставить контекстные блоки Бегуна или Яндекс.Директа.
* * *
Компания «АКВАВЭЙ», являющаяся одной из лидирующей в своей области, предлагает услуги частным лицам и предприятиям: проектирование и монтаж систем водоснабжения (теплоснабжения, водоотведения), установка систем очистки воды и ряд других услуг.
Первый.
Согласе, тоже так комментирую. Самый удобный и информативный вариант.
Не комментирую вообще. Имен классов и нормального редактора с возможностью свертывания блоков тегов вполне хватет, чтобы разобраться даже в сложнеших страницах.
Пробовал комментировать, именно таким образом (хотя без точки или хеша - только имя). Не пригодолось потом ни разу. Код лесенкой и осмысленные названия классов - уже достаточно удобно и информативно. Правда, когда разбираю чужой код, таких комментариев очень не хватает :)
зы: Редакторы, умеющие сворачивать блоки - рулят :)
Почти не комментирую. Разве что имя класса или id аналогично примеру, но без точки или решетки.
Форматирую всегда лесенкой. Очень помогает. Иногда фолдингом пользуюсь.
Если чужой код непонятен, то форматирую так, как удобно мне, потом разбираюсь быстро =)
Я не верстальщик, но свой бложик сама собирала по кусочкам. Там кода немного, и комменты практически не нужны. Но если бы я их использовала, то ставила бы коммент в начало блока, а не в конец. Так, имхо, искать легче.
всегда коментировал как попало)
теперь буду вот так.
[quote comment=”3365″]Редакторы, умеющие сворачивать блоки - рулят :)[/quote]
Какие наример, подскажите…
Сворачивать блоки это хорошо, Но если это к примеру jsp, или такой темплейт php в котором фрагмент не имеет открывающего тега но имеет закрывающий?
У меня ранее были коментарии следющего содержания:
2
3
<div>Ых</div>
<!-- Капец Футеру -->
Все разработчики ржали…
А когда я резал КосомполитанЮа, обсуждал в коментах тамашние (рыбу) сиськи :-). Руководительницей проекта была Женщина и программеры ессесно с ней не поделились приколами и выложили это в сеть. А когда таки народная молва до нее донесла виноватым остался я!
Практически так же, причем всегда - даже если я залезу в свой код через полгода чтобы что-то добавить/убрать - сразу пойму что где, экономия времени налицо! Когда много вложенных дивов, то начало блока легко найти, а вот где он закрывается… без комментариев сложно :)
блабла , вместо слэша еще удобно использовать END - глаз лучше цепляется и визуально больше отличий “начала” от “конца”
съелось, вот:
блабла
Комментарий использую только только если приходиться натягивать шаблон реализованный на smarty. Если просто верстаю то средств редактора хватает.
Комментирую только окончание основных div - иногда помогает. В основном страничка бьётся на модули - “шапка”, “навигация”, “основной текст”, “дно” - поэтому больше кодирую через php-шные инклуды (или шаблоны) - в этом случае код хорошо просматривается и без комментариев.
Если блок небольшой, то особого смысла в комментировании нет. Поскольку идет левый отступ табулятором, то блок несложно отличить. Но если блок в разных файлах, то комментирование обязательно, иначе не разберешься.
Делаю, примерно также, только в закрывающем указываю полный код открывающего:
2
3
</div><!-- div class="content-top" -->
Верстаю.
Обычно комментирую только или очень большие блоки, или те блоки, которые должны иметь возможность безболезненно убраться/добавиться на разных версиях страниц, чтобы разработчикам было удобнее ориентироваться по коду.
Делаю так:
<!–BEGIN: name_of_block–>
bla-bla-bla
<!–END: name_of_block–>
Комментирую и своих ребят приучаю оставлять комментарии вокруг всех ключевых блоков. Это может не касаться простеньких презентационных или рекламных сайтиков, но на больших сервисах без комментов никак не возможно - особенно, где много блоков, временно скрытых (которые показываются в зависимости от событий) и общее количество кода - несколько экранов.
Но на строках только не экономлю. и комменты делаю парными:
Код я делаю тоже лесенкой, но это не спасает, когда верстка натянута на движок. Если бы лесенка всегда оставалась лесенкой после обработки движком, то комментарии даже не были бы нужны, наверное.
Вот-вот. Поэтому меня спасают мои же комментарии, когда заказчик, которому я верстал, обращается ко мне через какое-то время с просьбой где-то что-то изменить. Т.е. хочу этим сказать, что станет всем удобнее и проще работать с кодом, в том числе и чужим, если в верстке будут присутствовать комменты.
А я вот даже не представляю, честное слово, в чем полезность сворачивания =) В моем ПСпаде отродясь не было такой функции, а тестируя другие редакторы, ее имеющие, я не смог оценить ее прелести ))
Иногда мне тоже приходится так делать.
Сложнее бывает закрывающийся тег найти. А о начале блока, как я уже сказал в посте, информирует либо идентификатор, либо класс. Если вы в коментарии пишите что-то типа “начала блока такого-то”, тогда я вас понимаю.
Например, EditPlus, Notepad++, SciTE, UltraEdit-32
Евгений, забавная история ;)
Я поначалу так и делал, но потом заменил на хэш и точку. И все равно глаз цепляется хорошо - комменты же своим цветом выделены ;) sonika, с бла-бла у тебя что-то не вышло :), не забывай, что в WordPress угловые скобки нужно в аски-коде писать.
MAX, твой вариант получается самым быстрым в плане написания коммента. Я не люблю использовать слова типа “Begin” и “End”, потому что муторно писать их каждый раз, а делаю комменты копипастом - сначала горячей клавишей код комментария, а затем копирую название класса/ID. Но точку или хэш все равно приходится ставить. А у тебя еще проще - просто скопировал и вставил :)
Не комментирую вообще. В IE до 6-й версии включительно блок комментариев
вносит порой дичайшие искажения рендеринга.
Так же стараюсь не использовать special символы типа
в концах очень вложенных друг в друга и при этом position:relative блоках. При некоторых условиях дико тормозит рендеринг.
Фёдор Аксёнов, по-моему уже давно пора забыть про IE младше 6-й версии. Пользователи таких версий живут в прошлом веке, и это их проблема, ИМХО, а не наша, разработчиков.
И как же вы, интересно, вставляете, например, символ копирайта?
Тоже интересует, почему вдруг не стоит использовать
?
Не комментирую, только код засорять.
Я в своем коде отлично ориентируюсь :-)
ps. Я не верстальщик.
Я вообще не комментирую свой код, т.к. работаю с ним в 99% случаев только я сам. Но твой способ мне понравился, возьму на заметку.
Последнее время стараюсь комментить парными тегами, мне так удобнее. Причем коммент лучше не лесенкой делать, как значимый код страницы, а всегда слева без отступов. Так проще видеть начало и конец блока.
<!–-start blockname-–>
код блока
<!–-end blockname-–>
Почти не комментирую. Иногда использую схему примерно описываемую Вами.
Безусловно комментарии нужны! ИМХО
Не так давно, но я все же стал их использовать, по-моему очень удобно!
to Фёдор Аксёнов
по моему проблемы с рендерингом встречаются достаточно редко
на моей практике только при вставки комментариев между float блоками.
Сам пользуюсь комментариями вот таким образом:
есть темплейт xtml файла в котором уже есть комментарии к основным блокам
2
3
4
5
6
7
8
9
10
11
12
<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 />
при наличии большого количества кода в блоках или вложенности использую
2
<!-- END .similar-video -->
Было бы интересно послушать как кто комментирует свои CSS файлы;)
Я комментирую так (извините сопру кусок чужого кода :)):
2
3
4
5
6
7
8
9
10
11
<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 по # и . я пожалуй возьму на вооружение :)
Комментариев не оставляю, делаю структуру кода вложенной, поэтому быстро ориентируюсь. Комментарии оставляю только если об этом просят заранее. Но все же думаю комменты нужны, и делать их думаю нужно как в начале блока так и в конце.
Ага, примерно также делаю. Только для подобных блоков в 90% именно идентификаторы, так что решетку или точку не ставлю. А ещё я однажды круто обломался с русскими комментариями в CSS, теперь там только на инглише пометки делаю.
А ты сохраняй CSS-файл в кодировке UTF-8, тогда обломов с русскими комментами не будет ;) Я, кстати, тоже их всегда на инглише пишу.
Я всегда в UTF-8 работаю. С русскими комментариями просто очередной специфичный глюк IE, поищи в сети, была информация где-то.
Я читал где-то эту инфу, только уже подзабыл, что там конретно рассказывалось. Думал, что юникод как раз и решит проблему в IE. Значит че-то путаю.
можно и не комментировать вообще… просто отделять блоки.
идентификаторы решётку и точку ставить нада …
Не знаю, лично я никогда не комментирую код, просто отступаю побольше пустых строчек.
возьму на заметку. я так пишу:
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 */