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

Links

BEM

By Oleksandr Hutsulyak

Made with Slides.com

BEM

  • 360

More from Oleksandr Hutsulyak