Question

我在邮件浏览器中使用this email template，以使其响应。

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

我怎么可能＆＃34;东西＆＃34;视觉上复杂的代码（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＆＃39;的变量中。或者什么然后插入到内联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>

我怎么能用helper-methods清理凌乱的css-inline视图？

2 个答案: