Нормально ли комментировать верстку?

Question

[Дмитрий Руденко]

Слишком много комментариев лишних или это наоборот хорошо?

код

<div class="container">
    <div class="row">
      <div class="col-lg-12">
        <div class="header__wrap">
          <!-- logo  -->
          <a class="header__logo-link" href="./index.html">
            <img
              src="img/header/logo.svg"
              alt="Durak Roll"
              class="header__logo"
            />
          </a>
          <!-- logo end  -->
          <!-- nav  -->
          <nav>
            <ul class="header__menu">
              <!-- nav item -->
              <li class="header__menu-item">
                <a href="./honesty.html" class="header__menu-link">ЧЕСТНОСТЬ</a>
              </li>
              <!-- nav item end  -->
              <!-- nav item -->
              <li class="header__menu-item">
                <a href="./faq.html" class="header__menu-link">ПОМОЩЬ</a>
              </li>
              <!-- nav item end  -->
              <!-- nav item -->
              <li class="header__menu-item">
                <a href="./contacts.html" class="header__menu-link">КОНТАКТЫ</a>
              </li>
              <!-- nav item end  -->
              <!-- nav item -->
              <li class="header__menu-item">
                <a href="./bonus.html" class="header__menu-link header__menu-link--red"
                  >FREE</a
                >
              </li>
              <!-- nav item end  -->
            </ul>
          </nav>
          <!-- nav end  -->
          <!-- user  -->
          <div class="header__user">
            <!-- img  -->
          <a class="header__user-img-link" href="./profile.html">
              <img
                src="img/header/user.png"
                alt="Avatar"
                class="header__user-img"
              />
          </a>
            <!-- img end  -->
            <!-- info  -->
            <div class="header__user-info">
              <!-- user name  -->
              <a href="./profile.html" class="header__user-name">Username</a>
              <!-- user name end  -->
              <!-- balance  -->
              <div class="header__user-balance">
                <!-- count  -->
                <div class="header__user-count-wrap">
                  <img
                    src="img/header/money.svg"
                    alt="Money"
                    class="header__user-count-img"
                  />
                  <p class="header__user-count-text"><span>1.32</span>m</p>
                </div>
                <!-- count end  -->
                <!-- user menu  -->
                <ul class="header__user-menu">
                  <li class="header__user-item">
                    <a href="#" class="header__user-link header__user-link--balance">Пополнить</a>
                  </li>
                  <li class="header__user-item">
                    <a href="#" class="header__user-link header__user-link--wmoney">Вывести</a>
                  </li>
                </ul>
                <!-- user menu end  -->
              </div>
              <!-- balance end  -->
              <!-- user level  -->
              <div class="header__user-level">
                <!-- current  -->
               <a class="header__user-level-link" href="./profile.html">
                  <p class="header__user-level-text header__user-level-current">
                    <span>17</span>ур.
                  </p>
               </a>
                <!-- current end  -->
                <!-- progress -->
                <div class="header__user-level-progress">
                  <div class="header__user-level-line"></div>
                </div>
                <!-- progress end  -->
                <!-- next  -->
                <a class="header__user-level-link" href="./profile.html">
                  <p class="header__user-level-text header__user-level-next">
                    <span>18</span>ур.
                  </p>
                </a>
                <!-- next end  -->
              </div>
              <!-- user level end  -->
            </div>
            <!-- info end -->
          </div>
          <!-- user  -->
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-lg-12">
        <!-- head  -->
        <div class="header__burger-head">
          <!-- btn  -->
          <div class="header__burger-btn"><span></span></div>
          <!-- logo  -->
        <a class="header__burger-logo-link" href="./index.html">
            <img
              src="img/header/logo.svg"
              alt="Durak Roll"
              class="header__burger-logo"
            />
        </a>
          <!-- logo end  -->
        </div>
        <!-- head end  -->
        <!-- burger  -->
        <div class="header__burger">
          <!-- user  -->
          <div class="header__burger-user">
            <!-- user info wrap  -->
            <div class="header__burger-user-wrap">
              <!-- user img  -->
              <img
                src="img/header/user.png"
                alt="User"
                class="header__burger-user-img"
              />
              <!-- info  -->
              <div class="header__burger-user-info">
                <!-- name  -->
                <p class="header__burger-user-name">Username</p>
                <!-- name end  -->
                <!-- balance -->
                <div class="header__burger-balance">
                <a class="header__burger-balance-icon-link" href="./profile.html">
                    <img
                      src="img/header/money.svg"
                      alt="money"
                      class="header__burger-balance-icon"
                    />
                </a>
                  <p class="header__burger-balance-count"><span>1.32</span>m</p>
                </div>
                <!-- balance end  -->
              </div>
              <!-- info end -->
            </div>
            <!-- user level  -->
            <div class="header__user-level">
              <!-- current  -->
              <a class="header__user-level-link" href="./profile.html">
                <p class="header__user-level-text header__user-level-current">
                  <span>17</span>ур.
                </p>
              </a>
              <!-- current end  -->
              <!-- progress -->
              <div class="header__user-level-progress">
                <div class="header__user-level-line"></div>
              </div>
              <!-- progress end  -->
              <!-- next  -->
             <a class="header__user-level-link" href="./profile.html">
                <p class="header__user-level-text header__user-level-next">
                  <span>18</span>ур.
                </p>
             </a>
              <!-- next end  -->
            </div>
            <!-- user level end  -->
            <!-- user info wrap end  -->
          </div>
          <!-- user end  -->
          <!-- user menu  -->
          <ul class="header__burger-user-menu">
            <li class="header__burger-user-menu__item">
              <a href="#" class="header__burger-user-menu__link">Пополнить</a>
            </li>
            <li class="header__burger-user-menu__item">
              <a href="#" class="header__burger-user-menu__link">Вывести</a>
            </li>
          </ul>
          <!-- user menu end  -->
          <!-- menu  -->
          <nav>
            <ul class="header__burger-menu">
              <li class="header__burger-menu-item">
                <a href="./honesty.html" class="header__burger-menu-link">ЧЕСТНОСТЬ</a>
              </li>
              <li class="header__burger-menu-item">
                <a href="./faq.html" class="header__burger-menu-link">ПОМОЩЬ</a>
              </li>
              <li class="header__burger-menu-item">
                <a href="./contacts.html" class="header__burger-menu-link">КОНТАКТЫ</a>
              </li>
              <li class="header__burger-menu-item">
                <a href="./bonus.html" class="header__burger-menu-link header__burger-menu-link--red">FREE</a>
              </li>
            </ul>
          </nav>
          <!-- menu end  -->
        </div>
        <!-- burger end  -->
      </div>
    </div>
  </div>
</header>

Comments

[twobomb]

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

[iBird Rose]

смысла в этом мало. ни бекендеру, ни другому верстальщику эти комменты ничего не облегчат. делай правильный нейминг классов, чтобы в комментах не было нужды и этого будет достаточно.

[Ankhena]

<!-- btn  -->
          <div class="header__burger-btn"><span></span></div>

Кнопки делать div'ами и подписывать в комментарии, что это кнопка - точно не нормально.

<!-- nav  -->
          <nav>

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

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

Используйте семантические теги и разумно называйте классы, так чтобы другому сразу было понятно, о чем речь. (БЭМ-подобные именования в этом смысле хороши)

[Владислав Лысков]

то, что ты закомментировал и так понятно из контекста, зачем это комментировать?

[Александр Васильев]

Добрый день. Так будет круче )))

<!-- logo  -->
  <!-- logo-link -->
    <a class="header__logo-link" href="./index.html">
      <!-- logo image -->
        <img src="img/header/logo.svg" alt="Durak Roll" class="header__logo" />
      <!-- logo image end -->
    </a>
  <!-- logo-link end -->
<!-- logo end  -->

Answer 1

[Сергей delphinpro]

слишком много комментариев лишних

Ключевое слово – лишних.
Лишних быть не должно.

Вот в этом месте

<!-- nav item -->
<li class="header__menu-item">
    <a href="./contacts.html" class="header__menu-link">КОНТАКТЫ</a>
</li>
<!-- nav item end  -->

комментирование абсолютно лишнее. Это визуальный мусор.

Разметку комментировать не нужно.
В верстке бывает полезно выделить блоки комментариями.

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

Если же вы тот самый программист, то html комментарии в результате вашей работы соверщенно излишни.

Answer 2

[Mesuti]

Нет смысла в таких комментариях.
Вместо них лучше указывать интуитивно понятные классы. (+БЭМ)

Комментарии лучше ставить там, где с первого взгляда не понятно что происходит.

Comments

[Дмитрий Руденко]

Сами классы похожи на бэм у меня?