MJML.io＆Email Inline CSS - 在元素級重複樣式嗎？

我正在掀起一個客戶端的新電子郵件模板。我希望它對移動設備友好，並儘可能多地瀏覽電子郵件客戶端/瀏覽器。在網上查看之後，MJML.io似乎很受歡迎，並且在研究此主題時推薦使用。MJML.io＆Email Inline CSS - 在元素級重複樣式嗎？

我打算爲Bootstrap尋找電子郵件。我第一次使用MJML。它非常漂亮，我只是想知道它生成的HTML。

我想指出，我非常瞭解HTML。我知道所有的代碼是什麼和做什麼。我不知道100％是否對各種電子郵件客戶端/瀏覽器有影響，以及它們如何處理呈現電子郵件的HTML。所以我可以清理所有漂亮的代碼並刪除額外的內聯樣式，以使我的強迫症感到高興。但是，我不想在響應中破壞任何東西。即：我不想刪除多餘的樣式並打破Outlook，或打破雅虎等。

下面是一個例子。有一個主表與另一個表內。我明白了。那麼整個表格只是一個空行？然後我們有一個有很多TR的桌子。我也知道。但是，有一個定義了樣式的p標籤，然後是其中的span其他樣式集。看起來多餘。此外，它多次定義基礎字體。

我可以通過設置字體系列，字體大小，字體顏色，所有在父table簡化這？ OR是否有某些原因在最低元素級定義多次？我看着這個，我只想在文本設置中設置一個基體字體，第一個div或主表，p，然後span s，當我需要不同的尺寸，重量，顏色等時。

我只是不知道這是否是電子郵件客戶端兼容魔術醬的一部分，我不想打破它大聲笑。 CSS，head等都是來自MJML.io的股票，我知道有些客戶剝奪了頭部，這意味着在那裏的樣式將被忽略。所以我不包括它，只是部分，以下事項：

<body style="background: #bedae6;"> 
 
    <div style="background-color:#bedae6;"> 
 
    <!--[if mso | IE]> 
 
    <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="600" align="center" style="width:600px;"> 
 
     <tr> 
 
     <td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"> 
 
    <![endif]--> 
 
    <table role="presentation" cellpadding="0" cellspacing="0" style="font-size:0px;width:100%;" border="0"> 
 
     <tbody> 
 
     <tr> 
 
      <td> 
 
      <div style="margin:0px auto;max-width:600px;"> 
 
       <table role="presentation" cellpadding="0" cellspacing="0" style="font-size:0px;width:100%;" align="center" border="0"> 
 
       <tbody> 
 
        <tr> 
 
        <td style="text-align:center;vertical-align:top;direction:ltr;font-size:0px;padding:20px 0px;padding-bottom:10px;padding-top:10px;"> 
 
         <!--[if mso | IE]> 
 
         <table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td style="vertical-align:middle;width:600px;"> 
 
         <![endif]--> 
 
         <div aria-labelledby="mj-column-per-100" class="mj-column-per-100 outlook-group-fix" style="vertical-align:middle;display:inline-block;direction:ltr;font-size:13px;text-align:left;width:100%;"> 
 
         <table role="presentation" cellpadding="0" cellspacing="0" style="vertical-align:middle;" width="100%" border="0"> 
 
          <tbody> 
 
          <tr> 
 
           <td style="word-break:break-word;font-size:0px;padding:10px 25px;padding-top:0px;padding-bottom:0px;padding-right:25px;padding-left:25px;" align="center"> 
 
           <div style="cursor:auto;color:#000000;font-family:'Open Sans', Ubuntu, Arial, sans-serif;font-size:11px;line-height:22px;text-align:center;"> 
 
            <p style="font-size: 11px"><span></span> 
 
            </p> 
 
           </div> 
 
           </td> 
 
          </tr> 
 
          </tbody> 
 
         </table> 
 
         </div> 
 
         <!--[if mso | IE]> 
 
         </td></tr></table> 
 
         <![endif]--> 
 
        </td> 
 
        </tr> 
 
       </tbody> 
 
       </table> 
 
      </div> 
 
      </td> 
 
     </tr> 
 
     </tbody> 
 
    </table> 
 
    <!--[if mso | IE]> 
 
     </td></tr></table> 
 
    <![endif]--> 
 
    <!--[if mso | IE]> 
 
    <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="600" align="center" style="width:600px;"> 
 
     <tr> 
 
     <td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"> 
 
    <![endif]--> 
 
    <div style="margin:0px auto;max-width:600px;background:#ffffff;"> 
 
     <table role="presentation" cellpadding="0" cellspacing="0" style="font-size:0px;width:100%;background:#ffffff;" align="center" border="0"> 
 
     <tbody> 
 
      <tr> 
 
      <td style="text-align:center;vertical-align:top;direction:ltr;font-size:0px;padding:20px 0px;padding-bottom:20px;padding-top:10px;"> 
 
       <!--[if mso | IE]> 
 
       <table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td style="vertical-align:top;width:600px;"> 
 
       <![endif]--> 
 
       <div aria-labelledby="mj-column-per-100" class="mj-column-per-100 outlook-group-fix" style="vertical-align:top;display:inline-block;direction:ltr;font-size:13px;text-align:left;width:100%;"> 
 
       <table role="presentation" cellpadding="0" cellspacing="0" style="vertical-align:top;" width="100%" border="0"> 
 
        <tbody> 
 
        <tr> 
 
         <td style="word-break:break-word;font-size:0px;padding:10px 25px;padding-top:10px;padding-bottom:10px;padding-right:25px;padding-left:25px;" align="left"> 
 
         <div style="cursor:auto;color:#000000;font-family:'Open Sans', Ubuntu, Arial, sans-serif;font-size:13px;line-height:22px;text-align:left;"> 
 
          <span style="display: block; font-size: 28px; font-weight: bold;"> 
 
          <span style="font-size:14.666666666666666px;font-family:'Open Sans', Ubuntu, Arial, sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;"> 
 
           <strong> 
 
           <span style="font-size: 20px;"> 
 
            <span style="color: rgb(81, 45, 11);">Hello {{NAME}},</span> 
 
          </span> 
 
          </strong> 
 
          </span> 
 
          </span> 
 
         </div> 
 
         </td> 
 
        </tr> 
 
        <tr> 
 
         <td style="word-break:break-word;font-size:0px;padding:10px 25px;padding-top:10px;padding-bottom:10px;padding-right:25px;padding-left:25px;" align="left"> 
 
         <div style="cursor:auto;color:#000000;font-family:'Open Sans', Ubuntu, Arial, sans-serif;font-size:13px;line-height:22px;text-align:left;"> 
 
          <p style="line-height:1.38;margin-top:0pt;margin-bottom:0pt;"> 
 
          <span style="font-size:14.666666666666666px;font-family:'Open Sans', Ubuntu, Arial, sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;"> 
 
           <span style="font-size: 18px;">This is the body of my email.</span> 
 
          </span> 
 
          </p> 
 
         </div> 
 
         </td> 
 
        </tr> 
 
        <tr> 
 
         <td style="word-break:break-word;font-size:0px;padding:10px 25px;" align="left"> 
 
         <table cellpadding="0" cellspacing="0" style="cellspacing:0px;color:#000;font-family:'Open Sans', Ubuntu, Arial, sans-serif;font-size:13px;line-height:22px;table-layout:auto;" width="100%" border="0"> 
 
          <tr> 
 
          <td style="padding: 0 15px 0 0;">1995</td> 
 
          <td style="padding: 0 15px;">PHP</td> 
 
          <td style="padding: 0 0 0 15px;">C, Shell Unix</td> 
 
          </tr> 
 
          <tr> 
 
          <td style="padding: 0 15px 0 0;">1995</td> 
 
          <td style="padding: 0 15px;">JavaScript</td> 
 
          <td style="padding: 0 0 0 15px;">Scheme, Self</td> 
 
          </tr> 
 
         </table> 
 
         </td> 
 
        </tr> 
 
        <tr> 
 
         <td style="word-break:break-word;font-size:0px;padding:25px 30px;padding-top:10px;padding-bottom:10px;padding-right:25px;padding-left:25px;" align="center"> 
 
         <table role="presentation" cellpadding="0" cellspacing="0" style="border-collapse:separate;" align="center" border="0"> 
 
          <tbody> 
 
          <tr> 
 
           <td style="border:none;border-radius:0px;color:#FFFFFF;cursor:auto;padding:10px 25px;" align="center" valign="top" bgcolor="#8bb420"> 
 
           <a href="https://mjml.io" style="text-decoration:none;line-height:100%;background:#8bb420;color:#FFFFFF;font-family:'Open Sans', Ubuntu, Arial, sans-serif;font-size:16px;font-weight:normal;text-transform:none;margin:0px;" target="_blank"> 
 
            <strong>Click here to go now !</strong> 
 
           </a> 
 
           </td> 
 
          </tr> 
 
          </tbody> 
 
         </table> 
 
         </td> 
 
        </tr> 
 
        <tr> 
 
         <td style="word-break:break-word;font-size:0px;padding:10px 25px;padding-top:10px;padding-bottom:10px;padding-right:25px;padding-left:25px;" align="left"> 
 
         <div style="cursor:auto;color:#000000;font-family:'Open Sans', Ubuntu, Arial, sans-serif;font-size:13px;line-height:22px;text-align:left;"> 
 
          <p></p> 
 
          <p style="line-height:1.38;margin-top:0pt;margin-bottom:0pt;"><span style="font-size:14.666666666666666px;font-family:'Open Sans', Ubuntu, Arial, sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">Thank You,</span> 
 
          </p> 
 
          <p></p> 
 
          <span style="font-size:14.666666666666666px;font-family:'Open Sans', Ubuntu, Arial, sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">{{COMPANY_NAME}}</span> 
 
          <p></p> 
 
         </div> 
 
         </td> 
 
        </tr> 
 
        </tbody> 
 
       </table> 
 
       </div> 
 
       <!--[if mso | IE]> 
 
       </td></tr></table> 
 
       <![endif]--> 
 
      </td> 
 
      </tr> 
 
     </tbody> 
 
     </table> 
 
    </div> 
 
    <!--[if mso | IE]> 
 
     </td></tr></table> 
 
    <![endif]--> 
 
    <!--[if mso | IE]> 
 
    <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="600" align="center" style="width:600px;"> 
 
     <tr> 
 
     <td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"> 
 
    <![endif]--> 
 
    <table role="presentation" cellpadding="0" cellspacing="0" style="font-size:0px;width:100%;" border="0"> 
 
     <tbody> 
 
     <tr> 
 
      <td> 
 
      <div style="margin:0px auto;max-width:600px;"> 
 
       <table role="presentation" cellpadding="0" cellspacing="0" style="font-size:0px;width:100%;" align="center" border="0"> 
 
       <tbody> 
 
        <tr> 
 
        <td style="text-align:center;vertical-align:top;direction:ltr;font-size:0px;padding:20px 0px;padding-bottom:10px;padding-top:10px;"> 
 
         <!--[if mso | IE]> 
 
         <table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td style="vertical-align:middle;width:600px;"> 
 
         <![endif]--> 
 
         <div aria-labelledby="mj-column-per-100" class="mj-column-per-100 outlook-group-fix" style="vertical-align:middle;display:inline-block;direction:ltr;font-size:13px;text-align:left;width:100%;"> 
 
         <table role="presentation" cellpadding="0" cellspacing="0" style="vertical-align:middle;" width="100%" border="0"> 
 
          <tbody> 
 
          <tr> 
 
           <td style="word-break:break-word;font-size:0px;padding:10px 25px;padding-top:0px;padding-bottom:0px;padding-right:25px;padding-left:25px;" align="center"> 
 
           <div style="cursor:auto;color:#000000;font-family:'Open Sans', Ubuntu, Arial, sans-serif;font-size:11px;line-height:22px;text-align:center;"> 
 
            <p style="font-size: 11px"><span></span> 
 
            </p> 
 
           </div> 
 
           </td> 
 
          </tr> 
 
          </tbody> 
 
         </table> 
 
         </div> 
 
         <!--[if mso | IE]> 
 
         </td></tr></table> 
 
         <![endif]--> 
 
        </td> 
 
        </tr> 
 
       </tbody> 
 
       </table> 
 
      </div> 
 
      </td> 
 
     </tr> 
 
     </tbody> 
 
    </table> 
 
    <!--[if mso | IE]> 
 
     </td></tr></table> 
 
    <![endif]--> 
 
    </div> 
 
</body>

我希望把它清理乾淨，從身體和內心的div，由字體，背景，填充等一個時間...

<body style="background: #bedae6; color:#000000; font-family:'Open Sans', Ubuntu, Arial, sans-serif; font-size:11px; line-height:22px"> 
    <div> 
    // .... 
    </div> 
</body>

又如，它設置字體大小設置爲0，則在一個子元素設置REA l字體大小，聲明填充兩次..這是什麼：

<tr> 
    <td style="font-size:0px;padding:10px 25px;padding-top:10px;padding-bottom:10px;padding-right:25px;padding-left:25px;" align="left"> 
     <div style="cursor:auto;color:#000000;font-family:'Open Sans', Ubuntu, Arial, sans-serif;font-size:13px;line-height:22px;text-align:left;"> 
      <p></p> 
      <p style="line-height:1.38;margin-top:0pt;margin-bottom:0pt;"><span style="font-size:14.666666666666666px;font-family:'Open Sans', Ubuntu, Arial, sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">Thank You,</span> 
      </p> 
      <p></p> 
      <span style="font-size:14.666666666666666px;font-family:'Open Sans', Ubuntu, Arial, sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">{{COMPANY_NAME}}</span> 
      <p></p> 
     </div> 
    </td> 
</tr>

來源

2016-12-25 Wade Shuler

如果問題是某些樣式不能繼承到表中，我不會感到驚訝。正常瀏覽器在Quirks模式下會發生這種情況。 –

WRT你對一張空白表格的評論，我不能說。也許是由於編輯原本在那裏有一些結構的現有模板而導致的，誰知道。或者，不加思索地使用WYSIWYG編輯器而不檢查出來的內容。 –

@MrLister - MJML.io受到高度讚揚的「去」地方生成響應式電子郵件代碼。我知道HTML就像我手背，所以這不是問題。 - 我關心的問題是重複內嵌樣式（即：字體，顏色，填充）是否是魔術醬的一部分，或者它是否是極端且不必要的。如果它有一個原因，我不想刪除字體，填充的雙重聲明。瞭解HTML，我的第一個想法是WTH這是多餘的和混亂的，我的OCD想要清理它！ - 我想我會編輯這個問題來更好地說明我的觀點。 –

我會盡我所能來涵蓋所有您的擔憂！

所以基本上有些客戶端不允許css內部的一些元素，如舊的Outlook和一些Gmail變種。像Padding僅支持到Outlook的表格元素P &。最重要的是，一些客戶端處理css繼承非常糟糕，所以您必須確保最深的節點具有css而不是將其分組爲父項。關於字體大小0這是一個招數avoid space between block

這就是爲什麼你有一些看起來多餘的CSS，他們在這裏確保模板在所有受支持的客戶端上都是相同的。

MJML有一些默認的MJ屬性（可以用mj-head內部的mj-attributes覆蓋），這些默認的MJ屬性可以轉換爲CSS屬性。就像你說的填充一樣，你可以同時使用填充和填充頂部/底部/右/左，它們可以單獨使用，但使用一個不會覆蓋另一個。

如果你想清理它，你可以使用mj-attributes「重置」默認屬性。

其他問題是生成的空白行的HTML的複雜性。你有多種方式來處理這與MJML（具有填充空部分，填充，空欄& mj-spacer，有時甚至「原始」的HTML與mj-raw）這取決於你正在設計的設計。

客戶端在輸出HTML的可讀性方面需要犧牲一些設備間的高兼容性。但是，我們正在盡我們所能清理輸出HTML，因爲像Gmail這樣的客戶端在電子郵件上有一些大小限制

來源

2017-01-02 17:58:16 iRyusa

MJML.io＆Email Inline CSS - 在元素級重複樣式嗎？

回答

相關問題