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

17 апреля 2008 г.

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

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

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

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

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-блога по-человечески вставить контекстные блоки Бегуна или Яндекс.Директа.

* * *

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

Теги: , автор: Dimox | рубрика CSS-верстка

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

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

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

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

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

    1
    2
    3
    4
    <div class="class">
       <div id="id">
       </div><!--/id -->
     </div><!--/class -->

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

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

    <!– Контент –>
    <div>
    Контент
    </div>
    <!– / Контент –>

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

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

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

    1
    2
    3
    4
    5
    6
    7
    <!-- <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.: Сделайте препросмотр комментария и его сохранение про ошибке (например, забыл ввести сумму цифр защиты от спама) :о)

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

    <wrapper><!– Wrapper –>

    </wrapper><!– End of wrapper –>

    <div class=”deco”><!– Deco –></div>

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

    @
  10. В css вот так:
    /* Header
    ————————————————*/

    /* Generic
    ————————————————*/
    /* typographics */

    /* bla-bla */

    @

Присоединяйтесь к обсуждению!

Отправляя кoммeнтapий, вы автоматически принимаете правила кoммeнтиpoвaния на этом блоге.

Правила кoммeнтиpoвaния на блоге dimox.name:

  1. Первый кoммeнтapий всегда проходит премодерацию.
  2. В поле "URL блога" можно указывать только ссылку на главную страницу вашего блога. Ссылки на прочие веб-ресурсы (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Запрещается использовать в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия имя изменяется по усмотрению владельца блога. Просьба указывать нормальное имя или ник.
  4. Весьма вероятно, что короткий и неинформативный кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.
  5. Комментарии не по теме удаляются.

Подписаться, не комментируя
  • Похожие статьи
  • Предыдущие из рубрики