Pleasant BEM

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

• .BlockName
• .BlockName.modifierName
• .BlockName-elementName
• .BlockName-elementName.modifierName

Accepted exception #1: DOM children selectors

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 child element can sometimes be omitted.

It is relevant when child elements are predetermined by the semantic: <dd>, <dt>, <li>, <td>, etc. Or when children are positioned through a parent CSS property like display: flex.

<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;
    }
  }
}

Accepted exception #2: 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.

Note – 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.