Pleasant BEM

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

Syntax

• .BlockName

• .BlockName.modifierName

• .BlockName-elementName

• .BlockName-elementName.modifierName

Three extensions to standard BEM conventions are allowed.

Extension 1 – Global modifiers

Note: This extension does not conform to BEM conventions.

Prefix with an underscore a CSS class that can affect every sub-block. For example:

._home .PageTitle {
  /* something specific to the home page here */
}

._home .Post-h1 {
  /* something specific too */
} 

Extension 2 – Child and sibling selectors inside a block

Note: This extension 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.

In a block, elements can be styled using child selectors and sibling selectors:

.TitledList-ul > li {
  background-color: #ccc;
}

Extension 3 – Scoped cascade

Note: This extension does not conform to BEM conventions.

Global modifiers can be used for styling semantic elements using cascading and inheritance. And it's also fine to use a "pseudo BEM block" that will act like a global modifier but with a block characteristic, for example: .Text for formatted text.

._text,
.Text {
  hyphens: auto;
  overflow-wrap: break-word;
  em, i {
    font-style: italic;
  }
  strong, b {
    font-weight: bold;
  }
  p, ul, ol {
    margin-bottom: .65em;
  }
  img.left {
    float: left; 
  }
  img.right {
    float: right; 
  }
}
.Text {
  &::after { /* because of the floated images */
    clear: both;
    content: "";
    display: block;
  }
}

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 the global modifier itself. 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>