名称元素用作复杂布局的描述

Question

我有一个项目，许多开发人员将在其中继承我的代码。我主要研究 HTML、CSS 和一些 JavaScript。我正在使用 Foundation 5，许多开发人员（主要是 NodeJS 和 JavaSCript 程序员）不熟悉 Foundation 和 Bootstrap 等响应式框架。他们确实非常了解媒体查询和 css，但根本无法使用 12 列布局等。

我有一些非常复杂的布局，其中有嵌套网格。我已经评论了这些领域的见鬼，以便他们了解我是否离开或不在附近提供帮助。我将 cmets 与 name="Content-Container" 或 name="Left-Column" & name="Right-Column" 结合​​使用。所以我使用名称元素作为一种描述。尽管层次结构复杂，但这些页面现在非常易于阅读和理解。

我在每一页的顶部都有一条评论说：

<!-- README: This page contains many comments to aid in debugging, etc..   --> 
<!-- There are many div's with a name element. These name elements were not-->
<!-- made to be targeted with css. These name elements are descriptions    -->
<!-- to aid with understanding their purpose.                              -->

这是个好主意吗？我是否通过在我离开时为它们提供针对这些 div 的替代方法来打开一罐蠕虫，而当它们应该使用现有的类和 ID 时不应该使用它们？

我是否应该不使用这些名称而只使用评论？我从未与大型团队合作过。他们似乎明白我为他们的代码带来了一些秩序和组织。我已经完全重组了他们的整个网站，但我不想增加不必要的复杂性或让他们无意中使用这些网站的能力。

鼓励你们的 cmets，我正在向那些习惯于在更大的团队中工作的人寻求建议，他们可能会看到我在这里开枪打死自己。

下面是我正在做的一个示例：

<!--All Content goes inside here. At the time of this writing it
    contains two columns that will stack vertically on small screens-->  
<div class="row" name="Content-Container">

    <!--This is the left hand column that takes up 7 of 12 columns-->
    <div class="medium-7 columns" name="Left-Column">

      <!--This starts a row to hold many 12 column content containers (Search, Filter, Image & Search Results)-->
      <div class="row" name="Left Column Row-Container">

        <!-- Start Search Row-->
        <div class="medium-12 columns">
          <div class="searchWikiMargin">
            <form name="searchForm" action="/">
              <div class="row collapse">
                <div class="small-10 columns">
                <input type="search" name="q" id="autoSearch" placeholder="Search local and beyond..." class="placehold">
                </div>
                <div class="small-2 columns">
                  <a href="#" class="button postfix" onclick="document.forms['ShopSearch'].submit(); ">Search</a>
                </div>
              </div>
            </form>
          </div>
        </div>
        <!-- End Search Row-->

        <!-- Start Filter Navigation Row-->
        <div class="medium-12 columns">
          <dl class="sub-nav">
            <dt>Filter:</dt>
            <dd class="active"><a href="#">Web</a></dd>
            <dd><a href="#">Images</a></dd>
            <dd><a href="#">News</a></dd>
            <dd><a href="#">All</a></dd>
          </dl><hr>
        </div>
        <!-- End Filter Navigation Row-->

        <!-- Start Mobile Wiki Results Row ~NO TOP MARGIN SHOWS ONLY ON SMALL SCREENS-->
        <div class="small-12 columns show-for-small-only">
          <div>
              <img src="...">
          </div>
        </div>
        <!-- End Mobile Wiki Results Row-->

        <!-- Start Image Results Row-->
        <div class="medium-12 columns">
        <h5>Image Results For tj hooker</h4>
          <ul class="small-block-grid-3">
            <li><img class="th" src="eb_images/tj-01.jpg" height="50"></li>
            <li><img class="th" src="eb_images/tj-02.jpg" height="50"></li>
            <li><img class="th" src="eb_images/tj-03.jpg" height="50"></li>
            <li><img class="th" src="eb_images/tj-04.jpg" height="50"></li>
            <li><img class="th" src="eb_images/tj-05.jpg" height="50"></li>
            <li><img class="th" src="eb_images/tj-06.jpg" height="50"></li>
          </ul>
        </div>
        <!-- End Image Results Row-->

        <!-- Start Search Results Row-->
        <div class="medium-12 columns">
          <h5>Image Results For tj hooker</h4>
            <img src="eb_images/tjresults.png">
        </div>
        <!-- End Search Results Row-->

      </div><!--End "Left-Column-Row-Container" -->

    </div><!--End "Left-Column" -->

    <!--This is the right hand column that takes up 5 of 12 columns-->
    <div class="medium-5 columns show-for-medium-up" name="Right-Column">

      <!--This starts a row to hold one 12 column content container (Wiki)-->
      <div class="row" name="Right-Column-Row-Container">

          <!-- Start Mobile Wiki Results Row ~HAS TOP MARGIN & SHOWS ONLY ON MEDIUM & LARGE (DESKTOP) SCREENS-->
          <div class="medium-12 columns">
          <div class="searchWikiMargin">
            <img src="eb_images/tjwiki.png">
          </div>
        </div>
        <!-- End Mobile Wiki Results Row-->

      </div><!--End "Right-Column-Row-Container"-->

    </div><!--End "Right-Column"-->

</div><!--End Row "Content-Container"-->

这只是页面的一部分。

Answer 1

“我是不是通过给它们提供针对这些 div 的替代方法来打开一罐蠕虫”

是的。我的理由：从长远来看，你最终会希望所有这些额外的东西失去它的用处（你希望你的团队最终在没有额外帮助的情况下运作）。

你回答了你自己的问题，我相信。 “我应该不使用这些名称而只使用评论吗？”

是的。使用额外的 cmets，评论它。注释不会改变代码。