Руководство по стилю для многострочного html

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

<div id="email-signup-container">
  <div id="mc_embed_signup">
    <div class="interested">
      <div class="container">

        <div class="left col-lg-6 col-md-6 col-sm-12 col-xs-12">
          <h3>Help New York residents keep the heat on this winter.</h3>
          <a href="#" onclick="location.href='http://www.nycharities.org/donate/charitydonate.asp?ID=4081'; return false;" class="donate-btn btn-interest">DONATE</a>
        </div>

        <div class="right col-lg-6 col-md-6 col-sm-12 col-xs-12">
          <h3>Without heat? Visit our resources page.</h3>
          <a class="btn-interest" href="resources">RESOURCES</a>
        </div>

      </div>
    </div>
  </div>
</div>

К сожалению, я не могу найти руководства по стилям, которые охватывают многоуровневый HTML. Я работал над одним проектом, где мы newlined вещи атрибутом, но это было противоречивым:

          <a
             href="#" onclick="location.href='http://www.nycharities.org/donate/charitydonate.asp?ID=4081'; return false;"
             class="donate-btn btn-interest">DONATE</a>

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

          <a
             href="#" onclick="location.href='http://www.nycharities.org/donate/charitydonate.asp?ID=4081'; return false;"
             class="donate-btn btn-interest"
          >DONATE</a>

Другие люди хотели, чтобы закрывающий тег находился на том же уровне, что и тег открытия:

          <a
             href="#" onclick="location.href='http://www.nycharities.org/donate/charitydonate.asp?ID=4081'; return false;"
             class="donate-btn btn-interest"
          >
            DONATE
          </a>

Я ненавижу их всех. Может ли кто-нибудь указать на какие-либо опубликованные руководства по стилям, которые охватывают это, поэтому мы можем просто принять его и продолжить?

Ответы

Ответ 1

Мне тоже интересно это. Единственное, что я мог найти, это руководство от Go900less, в котором говорится:

<!-- Try using line-breaks for multiple attributes, keeping the first attribute
on the tag opening line -->

Good:

<div custom-attribute 
class="something" 
role="something-else"></div> 
<!-- The closing tag    ^^^    can stay on the same line for empty elements-->

<div custom-attribute 
class="something" 
role="something-else">
··Foo <!-- Otherwise nest plz -->
</div>

Ответ 2

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

Пример:

<a
        href="#" onclick="location.href='http://www.nycharities.org/donate/charitydonate.asp?ID=4081'; return false;"
        class="donate-btn btn-interest">
    DONATE
</a>

Для тега a этот вид выглядит странно, но для более длинных имен тегов, как это принято в Angular, он выглядит нормально:

<my-component
        attribute1="val"
        attribute2="val2"
        attribute3="etc">
    <span>Hello :)</span>
</my-component>