Pleasant BEM

BEM naming conventions can be learned here.

The alternative BEM syntax

Note: This alternative BEM syntax, inspired from Nicolas Gallagher's work and rscss, is fully BEM compliant.

Media queries

CSS classes that only apply to certain media can be suffixed with :

The capital letters representing media are: M (mobile), T (tablet), D (desktop), L (large).

Examples:

CSS classes outside BEM

When a CSS class is needed outside the scope of BEM, then start it with a lowercase letter: .col-md-3.

Particular cases with DOM children

The CSS class of a predetermined child element (<li>, <dt>, <dd>, <td>, etc.) can be omitted when the parent is named using the markup semantics (like .MyBlockUl or .MyBlock-myElementUl):

<aside class="TitledList">
  <h1 class="TitledList-h1">Fruits</h1>
  <ul class="TitledList-ul">
    <li>Mangoes</li>
    <li class="-highlight">Bananas</li>
    <li>Pineapples</li>
  </ul>
</aside>

In the CSS code, use the child selector:

.TitledList {
  &-ul > li {
    background-color: #ccc;
    &.-highlight {
      font-weight: bold;
    }
  }
}

It is also accepted to omit the name of an element when the parent DOM node imposes child positioning through a CSS property like display: flex or a child selector. For example, a block .FlexBar can have unamed elements .FlexBar > *.

Note: This practice does not respect BEM principles. In doing so, some of your CSS classes are tied to HTML tags. But scalability, with the ability to nest subblocks, is preserved.

The particular case of formatted text

Use a "pseudo BEM block" for formatted text: .Text. Style its contents using cascading and inheritance only:

.Text {
  color: #333;
  font-family: serif;
  font-size: .875rem;
  a {
    color: blue;
  }
  p,
  ul,
  ol {
    margin: 0 0 .65em;
  }
}

Do not use any styles that would apply to the container box (do not use padding, margin, border, background, position, display, etc. on .Text). Instead, use this block in association with other CSS classes responsible for styling the box:

<article class="Post">
  <h1 class="Post-h1 Text">Here <em>the title</em></h1>
  <div class="Post-body Text">
    <p>Some <strong>formatted text</strong>.</p>
  </div>
</article>

Set the rules for the .Text selector at the beginning of the CSS file. Then, a variant can be implemented by styling an associated CSS class (.Post-h1 could define its own font size) or with a modifier.

Note: The .Text class does not conform to BEM conventions. The limitation is that only "text format resistant" BEM blocks can be nested in a formatted text.