Главная CSS-верстка

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

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

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

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

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

<div id="container">

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

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

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

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

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

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

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

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

    код блока

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

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

  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. Я комментирую так (извините сопру кусок чужого кода :)):


    <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. Комментариев не оставляю, делаю структуру кода вложенной, поэтому быстро ориентируюсь. Комментарии оставляю только если об этом просят заранее. Но все же думаю комменты нужны, и делать их думаю нужно как в начале блока так и в конце.

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

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

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

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

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

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

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

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

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

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

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

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

    Контент

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

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

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

    <!-- <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. Я комментирую вот так:



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