Przewodnik po stylu dla wielowierszowego html

Question

Mam trochę dłuższego kodu HTML, który przekracza mój limit 80 znaków. Mamy przewodnik stylu, który ogranicza liczbę znaków w linii, co jest dobre, ponieważ teraz linia jest tak długa, że ​​nie można jej zobaczyć bez przewijania w prawo.

<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="http://www.nycharities.org/donate/charitydonate.asp?ID=4081" 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> 

Niestety, nie mogę znaleźć żadnych przewodników po stylach obejmujących wielowierszowy kod HTML. Pracowałem na jednym projekcie, gdzie newlined rzeczy przez atrybut, ale to było kontrowersyjne:

  <a 
      href="http://www.nycharities.org/donate/charitydonate.asp?ID=4081" 
      class="donate-btn btn-interest">DONATE</a> 

Niektórzy ludzie chcieli carot zamknięcia na nową linię:

  <a 
      href="http://www.nycharities.org/donate/charitydonate.asp?ID=4081" 
      class="donate-btn btn-interest" 
      >DONATE</a> 

Inni ludzie chcieli tag zamykający na tym samym poziomie co tag otwierający:

  <a 
      href="http://www.nycharities.org/donate/charitydonate.asp?ID=4081" 
      class="donate-btn btn-interest" 
      > 
      DONATE 
      </a> 

Nienawidzę ich wszystkich. Czy ktokolwiek może wskazać publikowane przewodniki stylów, które je opisują, abyśmy mogli je po prostu zastosować i przejść dalej?

Answer 1

Zastanawiam się również nad tym. Jedyną rzeczą, którą mogłem znaleźć był the guide from GoCardless, który mówi:

<!-- Try using line-breaks for multiple attributes, keeping the first attribute 
on the tag's 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> 

Answer 2

nie jednoznacznej odpowiedzi, ale chciałbym, aby dodać kolejną propozycję: wcięcia atrybuty dwukrotnie, a zawartość tylko raz.

Przykład:

<a 
     href="http://www.nycharities.org/donate/charitydonate.asp?ID=4081" 
     class="donate-btn btn-interest"> 
    DONATE 
</a> 

Dla a tagu tego rodzaju wygląda dziwnie, ale na dłuższe Tag-imion, jakie są powszechne w kątowa, wygląda dobrze:

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