Pleasant BEM

Revision of June 10, 2020.

Pleasant BEM is an alternative BEM syntax, inspired from Nicolas Gallagher's work. It is fully BEM compliant. BEM naming conventions can be learned here.

Syntax

Classic version:

Armored version:

In the armored version of Pleasant BEM, all modifiers must be prefixed with a hyphen in order to avoid conflicts with most of CSS frameworks (this is an idea from rscss).

Optional rule — Media queries

CSS classes that only apply to certain media may be suffixed with: OnMob (mobile), OnTab (tablet), OnDes (desktop), OnXl (extra-large screen).

Examples:

Optional rule — CSS classes outside BEM

When a CSS class is needed outside the scope of BEM, it may have a prefix beginning with a lowercase letter and including a hyphen: .js-searchInput.

Optional rule — Particular cases with DOM children

Note: This rule does not conform to BEM principles. In using it, some of CSS classes are tied to HTML tags. But scalability, with the ability to nest subblocks, is preserved.

The CSS class of a predetermined child element (<dd>, <dt>, <li>, <td>, etc.) can be omitted:

<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 > *.

Optional rule — The particular case of formatted text

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.

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

.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 background, border, display, flex, grid, margin, padding, position, 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 a <em>formatted 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.