Question

我有一些冗长的HTML，超过了我的项目的80个字符限制。我们有一个样式指南，它限制每行的字符数，这很好，因为现在这行很长，如果不向右滚动就看不到它。

s = "string"
letters = "xyz"
intersection = set(s) & set(letters)
if len(intersection) == 0 then:
    match = False
else:
    match = True
    if "x" in s:
       var_1 = "something"
    if "y" in s:
       var_2 = "something else"
    if "z" in s:
       var_1 = "something something"
       var_2 = "some thing"

不幸的是，我找不到任何涵盖多行HTML的样式指南。我参与了一个项目，在那个项目中，我们按属性对事物进行了新的规划，但这是有争议的：

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

有些人希望在这样的新线上关闭carot：

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

其他人希望结束标记与开始标记位于同一级别：

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

我讨厌所有人。任何人都可以指出任何已发布的风格指南，以便我们可以采用一个并继续前进吗？

Answer 1

我一直在想这个。我唯一能找到的是the guide from GoCardless，其中说：

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

不是一个明确的答案，但我想补充一点建议：将属性缩进两次，内容只缩一次。

一个例子：

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

对于a标签，这种看起来很奇怪，但对于较长的标签名称，如Angular中常见的那样，它看起来很好：

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

多行html的样式指南

2 个答案: