如何使用辅助方法清理凌乱的 css 内联视图？

Question

我在我的邮件视图中使用this email template，以使其具有响应性。

问题在于使用它在视觉上非常令人生畏。

如何在辅助方法中“填充”视觉上复杂的代码（html），如下所示：

    <table class="main" width="100%" cellpadding="0" cellspacing="0" style="font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; box-sizing: border-box; font-size: 14px; border-radius: 3px; background: #fff; margin: 0; padding: 0; border: 1px solid #e9e9e9;">
      <tr style="font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; box-sizing: border-box; font-size: 14px; margin: 0; padding: 0;">
        <td class="content-wrap" style="font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; box-sizing: border-box; font-size: 14px; vertical-align: top; margin: 0; padding: 20px;" valign="top">
          <table width="100%" cellpadding="0" cellspacing="0" style="font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; box-sizing: border-box; font-size: 14px; margin: 0; padding: 0;">
            <tr style="font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; box-sizing: border-box; font-size: 14px; margin: 0; padding: 0;">
              <td class="content-block" style="font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; box-sizing: border-box; font-size: 14px; vertical-align: top; margin: 0; padding: 0 0 20px;" valign="top">
                Please confirm your email address by clicking the link below.
              </td>
            </tr>
            <tr style="font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; box-sizing: border-box; font-size: 14px; margin: 0; padding: 0;">
              <td class="content-block" style="font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; box-sizing: border-box; font-size: 14px; vertical-align: top; margin: 0; padding: 0 0 20px;" valign="top">
                We may need to send you critical information about our service and it is important that we have an accurate email address.
              </td>
            </tr>
            <tr style="font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; box-sizing: border-box; font-size: 14px; margin: 0; padding: 0;">
              <td class="content-block" style="font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; box-sizing: border-box; font-size: 14px; vertical-align: top; margin: 0; padding: 0 0 20px;" valign="top">
                <a href="http://www.mailgun.com" class="btn-primary" style="font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; box-sizing: border-box; font-size: 14px; color: #FFF; text-decoration: none; line-height: 2; font-weight: bold; text-align: center; cursor: pointer; display: inline-block; border-radius: 5px; text-transform: capitalize; background: #348eda; margin: 0; padding: 0; border-color: #348eda; border-style: solid; border-width: 10px 20px;">Confirm email address</a>
              </td>
            </tr>
            <tr style="font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; box-sizing: border-box; font-size: 14px; margin: 0; padding: 0;">
              <td class="content-block" style="font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; box-sizing: border-box; font-size: 14px; vertical-align: top; margin: 0; padding: 0 0 20px;" valign="top">
                &mdash; The Mailgunners
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>

Answer 1

从一个地方开始：

从 ERB 切换到 HAML，这将立即将其减少一半，并增加剩余内容的可读性。

另一件要尝试的事情是在文件顶部创建变量 - 我看到这被大量使用：

table_base = width="100%" cellpadding="0" cellspacing="0" 

base_style = style="font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; box-sizing: border-box; font-size: 14px;"

也许您可以将其放入名为“table_base”的变量或其他东西中，然后将其插入到内联 css 中。它不会删除所有的内联性，但会清除其中的大部分内容。

例如：

%table.main "#{table_base} #{base_style}" style="border-radius: 3px; background: #fff; margin: 0; padding: 0; border: 1px solid #e9e9e9;"

插值可能需要一些摆弄，但这是可能的。

Answer 2

您不需要使用辅助方法。只需使用样式标签。

<style type="text/css">
  table{
    width: 100%;
    border-spacing: 0;
    border-collapse: collapse;
    font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
    box-sizing: border-box;
    font-size: 14px;
    margin: 0;
    padding: 0;
  }

  table.main{
    border-radius: 3px;
    background: #fff;
    border: 1px solid #e9e9e9;
  }

  table > tr{
    margin: 0;
    padding: 0;
  }

  table.main td.content-wrap{
    vertical-align: top;
    margin: 0;
    padding: 20px;
  }

  table.main table td.content-block{
    vertical-align: top;
    margin: 0;
    padding: 0 0 20px;
  }

  table.main table td.content-block a{
    color: #FFF;
    text-decoration: none;
    line-height: 2;
    font-weight: bold;
    text-align: center;
    cursor: pointer;
    display: inline-block;
    border-radius: 5px;
    text-transform: capitalize;
    background: #348eda;
    margin: 0;
    padding: 0;
    border-color: #348eda;
    border-style: solid;
    border-width: 10px 20px;
  }

</style>

<table class="main">
  <tr>
    <td class="content-wrap">
      <table>
        <tr>
          <td class="content-block">
            Please confirm your email address by clicking the link below.
          </td>
        </tr>
        <tr>
          <td class="content-block">
            We may need to send you critical information about our service and it is important that we have an accurate email address.
          </td>
        </tr>
        <tr>
          <td class="content-block">
            <a href="http://www.mailgun.com" class="btn-primary">Confirm email address</a>
          </td>
        </tr>
        <tr>
          <td class="content-block">
            &mdash; The Mailgunners
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>