BEM And Layout Rich Texts

Question

I read here that it is a good BEM practise to use layout components to arrange the flow and positioning of other components. The resource suggests the following example:

   <ul class="l-grid">
       <li class="l-grid__item">
           <div class="c-card">
               <div class="c-card__header">
                   […]
               </div>
               <div class="c-card__body">
                   […]
               </div>
           </div>
       </li>
       <li class="l-grid__item">
           <div class="c-card">
               <div class="c-card__header">
                   […]
               </div>
               <div class="c-card__body">
                   […]
               </div>
           </div>
       </li>
   </ul>

While the above makes perfect sense, I'm not sure on how to apply this approach to a typical block based page flow such as the listed below:

        <section class="c-page-section c-page-section--white-bg">

           <div class="l-container">

               <h1 class="c-page-section__title">Page Title</h1>
               <hr class="c-separator c-page-section__separator">

               <p class="c-paragraph">
                   ...
               </p>
               <p class="c-paragraph">
                   ...
               </p>
               <p class="c-paragraph">
                   ...
               </p>
               <ul class="l-horizontal-list">
                   <li class="l-horizontal-list__item c-tag">Java</li>
                   <li class="l-horizontal-list__item c-tag">PHP</li>
                   <li class="l-horizontal-list__item c-tag">HTML</li>
                   <li class="l-horizontal-list__item c-tag">CSS/SASS</li>
               </ul>

           </div>

    </section>

I am uncertain whether to apply margins inside the h1, hr and p based c-components or to create additional layout components around the them?

Thank you in advance!

Answer 1

BEM is a good tool to layout a website, it is also an excellent tool to structure the appearance of a web application. But, use BEM to style rich texts? It's just... not the good tool.

I suggest you to create a "not BEM component", named rich-text, with cascades:

.rich-text p {
  /* style here, including margins and paddings */
}
.rich-text hr {
  /* style here, including margins and paddings */
}
.rich-text ul {
  /* style here, including margins and paddings */
}
.rich-text ul > li {
  /* style here, including margins and paddings */
}
// etc.

And in your HTML code:

    <section class="c-page-section c-page-section--white-bg">
       <div class="l-container rich-text">
           <h1>Page Title</h1>
           <hr>
           <p> ... </p>
           <p> ... </p>
           <p> ... </p>
           <ul>
               <li>Java</li>
               <li>PHP</li>
               <li>HTML</li>
               <li>CSS/SASS</li>
           </ul>
       </div>
    </section>

Then, you have to remember that other BEM components cannot be nested into this rich-text component (because of cascades). But even with the BEM methodology you could not nest any component anywhere in a richtext. Due to the semantic limitation of tags <p> or <em> that cannot embed <div> for example.

Notice: I suggest to not style .rich-text itself as a block: no padding neither margin or background. It is more reusable if all properties of the rich text component are only about the rich text elements. You could need to display several rich texts in the page and they won't share the same background or paddings. If you need to display the rich text in a white rectangle with borders, just create a true BEM component for that and make it a container of the rich text.