style guide für mehrzeilige html

Question

Ich habe einige lange HTML, die über die Grenze von 80 Zeichen für mein Projekt ist. Wir haben einen Style-Guide, der die Anzahl der Zeichen pro Zeile einschränkt. Das ist gut, weil die Zeile gerade so lang ist, dass Sie nicht alles sehen können, ohne nach rechts zu scrollen.

<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> 

Leider kann ich keine Style Guides finden, die Multiline-HTML abdecken. Ich arbeitete an einem Projekt, bei dem wir die Dinge von Attribut newlined, aber es war umstritten:

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

Andere Leute wollten das schließende Tag:

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

Einige Leute die Schließung carot auf einer neuen Zeile wie diese wollte auf der gleichen Ebene wie die Eröffnung Tag:

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

Ich bin irgendwie hassen alle von ihnen. Kann irgendjemand auf irgendwelche veröffentlichten Styleguides verweisen, die das abdecken, damit wir einfach eins annehmen und weitermachen können?

Answer 1

Ich habe mich das auch gefragt. Das einzige, was ich finden konnte war the guide from GoCardless, die sagt:

<!-- 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

keine definitive Antwort, aber ich möchte noch einen weiteren Vorschlag hinzuzufügen: Einrücken die Attribute zweimal, und den Inhalt nur einmal.

Ein Beispiel:

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

Für eine a Tag diese Art von Aussehen seltsam, aber für einen längeren Tag-Namen, wie in Angular üblich sind, es sieht gut aus:

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