BEM

CSS methodology

BEM methodology was invented at Yandex to develop sites which should be launched fast and supported for a long time. It helps to create extendable and reusable interface components.

https://en.bem.info/methodology/

BEM

Block
Element
Modifier

Block - a logically and functionally independent page component, the equivalent of a component in Web Components. A block encapsulates behavior (JavaScript), templates, styles (CSS), and other implementation technologies. Blocks being independent allows for their re-use, as well as facilitating the project development and support process.

Block features:

Nested structure
Arbitrary placement
Re-use

Element - a constituent part of a block that can't be used outside of it.

Modifier - a BEM entity that defines the appearance and behaviour of a block or an element.

The use of modifiers is optional.

Naming conventions

Classic proposed by Yandex:

block_name__elem_name-mod_name

Harry Robert's:

block-name__elem-name--mod-name

Example Markup

<nav class="top-nav">
  <ul class="top-nav__list">
    <li class="top-nav__item top-nav__item--active">
      <a href="#home" class="top-nav__link">
        <i class="top-nav__icon top-nav__icon--home"></i>
      </a>
    </li>
    <li class="top-nav__item">
      <a href="#configure" class="top-nav__link">
        <i class="top-nav__icon top-nav__icon--configure"></i>
        <span class="top-nav__description">
          Configure
        </span>
      </a>
    </li>
    <li class="top-nav__item">
      <a href="#admin" class="top-nav__link">
        <i class="top-nav__icon top-nav__icon--admin"></i>
        <span class="top-nav__description">
          Admin
        </span>
      </a>
    </li>
    <li class="top-nav__item">
      <a href="#help" class="top-nav__link">
        <i class="top-nav__icon top-nav__icon--help"></i>
        <span class="top-nav__description">
          Help
        </span>
      </a>
    </li>
  </ul>
</nav>

Example CSS

.top-nav {}
  .top-nav__list {}
  .top-nav__item {}
    .top-nav__item--active {}
  .top-nav__link {}
    .top-nav__icon {}
      .top-nav__icon--home {}
      .top-nav__icon--configure {}
      .top-nav__icon--admin {}
      .top-nav__icon--help {}
    .top-nav__description {}

Pros

increased readability
minimum possible CSS specificity
encapsulation into components
increased re-use capabilities
increased searching capabilities
increased support/refactoring
namespacing

Cons

looks a bit ugly on beginning
violates DRY principles, as you need to write full CSS class selectors all the time

BEM

BEM