hướng dẫn kiểu dành cho nhiều dòng html

Question

Tôi có một số HTML dài hơn giới hạn 80 ký tự cho dự án của tôi. Chúng tôi có một hướng dẫn phong cách giới hạn số lượng ký tự trên mỗi dòng, điều này rất tốt vì hiện tại dòng này chạy quá lâu đến mức bạn không thể nhìn thấy tất cả mà không cần cuộn sang phải.

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

Thật không may, tôi không thể tìm thấy bất kỳ hướng dẫn kiểu nào bao gồm HTML đa cấp. Tôi đã làm việc trên một dự án mà chúng tôi newlined điều bởi thuộc tính, nhưng nó đã gây nhiều tranh cãi:

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

Một số người muốn carot đóng cửa trên một dòng mới như thế này:

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

Những người khác muốn thẻ đóng ở cùng cấp với thẻ mở:

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

Tôi ghét tất cả chúng. Bất cứ ai có thể trỏ đến bất kỳ hướng dẫn phong cách được xuất bản bao gồm này để chúng tôi chỉ có thể áp dụng một và di chuyển trên?

Answer 1

Tôi cũng đã tự hỏi điều này. Điều duy nhất tôi có thể tìm được the guide from GoCardless, mà nói:

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

Không phải là một câu trả lời rõ ràng, nhưng tôi muốn thêm một gợi ý: thụt các thuộc tính hai lần, và các nội dung chỉ một lần.

Một ví dụ:

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

Đối với một thẻ a loại vẻ lạ, nhưng đối với thẻ-tên dài hơn, như là phổ biến trong góc, có vẻ tốt đẹp:

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