Difficulty in understanding CSS-styling in MJML

Question

I'm new to MJML and using css-styles is kind of weird. For styling a <mj-text css-class="classname"></mj-text> we have to add a "div" keyword in css-styles like:

<mj-style>
 .classname div{
font-size: 15px;
 }  
</mj-style>

For mjml-text we use "div" along with the classname to style, for tags like <mj-image> or <br> etc..I have no idea how to use css-classes. Also why do we add that div along the classname while styling?. Please Help...

Answer 1

Good question.

MJML and HTML are markup languages. MJML depends entirely on HTML and CSS for browser effects. That is, the MJML program translates the MJML markup into HTML and CSS. The browser gets only the HTML and CSS.

If we restrict ourselves to HTML and CSS constructs that email clients (Gmail, etc.) support, we can get good email results. That's hard. MJML helps.

In HTML, we can interact with DOM objects via CSS, sometimes using the concept of class. We can use attributes, both in and out of classes.

Similarly, in MJML we can interact with MJML components via MJML attributes and the MJML concept of mj-class. We can use MJML attributes both in and out of mj-classes.

The MJML mj-style component supports specifying CSS code that MJML includes in the HTML. That is, the code inside the mj-style tags is CSS, not either HTML or MJML. All syntax, application rules, and effects come only from CSS and HTML.

Email authors can apply MJML attributes and mj-class only to MJML components, not to HTML elements. MJML translates MJML markup to HTML, but email authors must depend on that translation process.

Consider this MJML script.

<mjml>
  <mj-head>
    <mj-attributes>
      <mj-class name="mjclass" color="green" font-size="30px" />
    </mj-attributes>
    <mj-style inline="inline">
      .blue-text div {
        color: blue !important;
      }
    </mj-style>
    <mj-style>
      .red-text div {
        color: red !important;
        text-decoration: underline !important;
      }
    </mj-style>
  </mj-head>
  <mj-body>
    <mj-section>
      <mj-column>
        <mj-text css-class="red-text" font-style="italic">
          I'm red and underlined
        </mj-text>
        <mj-text css-class="blue-text">I'm blue because of inline</mj-text>
        <mj-text mj-class="mjclass">I'm green</mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

This is code from MJML documentation (almost, see below). Let's look into it.

https://mjml.io/try-it-live/jecmNRR-jzO You might find this URL useful--I hope it won't go stale for at least a month. There, you'll see the above script and its browser rendering. I'll explain how to see the HTML markup. I'll use that URL below.

Mostly for others or for later readers: If you're not able to use the URL and wish to recreate the following, maybe you can copy-and-paste the above code into https://mjml.io/try-it-live. Otherwise, you'll want access to the MJML program and to MJML and HTML files. MJML introductory pages are at https://mjml.io/. MJML works as a NodeJS (NPM) module. The community offers a desktop application. The MJML team supports a VS Code plug-in. There are lots of live questions and answers at https://mjml.slack.com/ (signup: https://join.slack.com/t/mjml/shared_invite/zt-gqmwfwmr-kPBnfuuB7wof5httaTcXxg).

In the MJML, let's look at this element

<mj-text css-class="red-text" font-style="italic">
   I'm red and underlined
</mj-text>

Compared to the documentation, I used three lines (rather than one) and I added the MJML attribute font-style. No other changes.

• In the mj-style containing ".red-text" (CSS code, remember), we specify we want the text to be red and underlined (CSS and HTML rules and effects).
• In the mj-text tag above, perhaps you'd expect the MJML syntax of font-style="italic" would italicize the text.

Indeed we see all those in the browser rendering. The text is red, underlined, and italicized.

How did that happen? MJML created HTML; let's look at the HTML.

If you're using the URL above, touch/click the words "View HTML" near the top right of the rendering window. I hope you'll see code you recognize as HTML and CSS.

I'll mention two line numbers below. They're probably tied to MJML version 4.7.1. I found them with a search for "red-text"; that should work in many other versions.

My line 75 is part of an HTML style tag MJML included. The HTML inside is identical to the code within the MJML mj-style tag that contains "red-text". Whew! That's the intent.

My line 108 is part of an HTML table, in particular a td. This element has a class of "red-text" and a child div. The div has an HTML attribute "font-style:italic" and text of "I'm red and underlined".

The text in the div is affected by (1) the attribute within the div calling for italics, and (2) the attributes from class "red-text" (CSS and HTML rules) calling for red and for underlining on child divs.

That's how that text got to be red, underlined, and italicized. And that's how to use css-class. And mj-class. Thanks for reading this far.

Second question, also a good question. (Why the div in the documentation?)

Here's an introduction to a technique you might use a lot as an email author with MJML.

1. Write the MJML you want.

2. If you can't find MJML stylings to get the right rendering, identify the MJML tag you want to target. Add a css-class to the MJML and write an mj-style for the class you used. The objective now is to know where MJML will put the CSS class; the exact stylings can come later. Then, in the HTML, find that class and the DOM object you'd style as an HTML author (the target DOM object). (Secret: You're both those authors!)

3. Use CSS in mj-style to style the target DOM object.

In this case, step 1 is complete with the MJML script above (you wouldn't have the mj-styles yet). This is where you'd decide to make the text "I'm red and underlined" (wait for it!), red and underlined. Email authors can do both of those with MJML, but we're learning to do them with CSS and HTML. We'll continue.

Step 1 led me to the mj-text with "I'm red and underlined"--the target mj-text.

Step 2 starts when you put the css-class in the target mj-text and write a matching mj-style. The mj-style might not have final attributes.

Step 2 is complete when you search the HTML code for the class name used in your mj-style and the string "I'm red and underlined". Something's wrong if these DOM objects aren't close to each other; they could be the same object. Their relationship governs how you'll write the mj-style CSS in step 3.

In step 2, I'd found the class in a td at HTML line 108 and the string in a child div.

Step 3 starts when you write CSS for the mj-style just as you'd write for an HTML style to select the target DOM object. Be careful to use only selectors email client programs support; otherwise, your email will give unexpected results to contacts using those programs. Also, select the CSS attributes to create your rendering.

Step 3 ends when you get the desired rendering.

In step 3, ".red-text div" selects the div; that went in the MJML script within the mj-style referring to "red-text". The needed CSS attributes went there, too.

This is beyond your question, but it's short: Check whether you feel the mj-html-attributes component makes this process easier.

That's, "Why the div?" It won't always be a div; the target DOM object might be more than one object deep.

Welcome to the MJML world. In writing MJML, keep in mind that the list of HMTL classes and the list of MJML mj-classes are separate, not interchangeable. And the same with the list of HTML attributes and the list of MJML attributes; also not interchangeable (though MJML reuses names, as they should). You can use them all, but keep them separate (as this element did).

More questions? There's help here. Again, there are lots of good answers at https://mjml.slack.com/ (signup: https://join.slack.com/t/mjml/shared_invite/zt-gqmwfwmr-kPBnfuuB7wof5httaTcXxg), too. Two friendly crowds.