html - div - style to title tag

guia de estilo para multiline html

Question

Tengo un HTML largo que supera el límite de 80 caracteres para mi proyecto. Tenemos una guía de estilo que restringe el número de caracteres por línea, lo cual es bueno porque en este momento la línea es tan larga que no se puede ver todo sin desplazarse a la derecha.

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

Desafortunadamente, no puedo encontrar ninguna guía de estilo que cubra multilínea HTML. Trabajé en un proyecto en el que trazamos nuevas cosas por atributo, pero fue controvertido:

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

Algunas personas querían el carot de cierre en una nueva línea como esta:

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

Otras personas querían la etiqueta de cierre al mismo nivel que la etiqueta de apertura:

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

Los odio a todos. ¿Alguien puede apuntar a alguna guía de estilo publicada que cubra esto para que podamos simplemente adoptar una y seguir adelante?

Answer 1

No es una respuesta definitiva, pero me gustaría agregar otra sugerencia: sangrar los atributos dos veces y el contenido solo una vez.

Un ejemplo:

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

Para una etiqueta de este tipo parece extraño, pero para nombres de etiqueta más largos, como son comunes en Angular, se ve bien:

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

Answer 2

También me he estado preguntando esto. Lo único que pude encontrar fue la guía de GoCardless , que dice:

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