What is BEM?

Block Element Modifer - is a component-based approach to web development. The idea behind it is to divide the user interface into independent blocks.

Created by Yandex in 2005

Code that is hard to maintain

<!-- How those classes are related? -->


<div class="media user premium">
  <img class="img photo avatar" src="" />
  <p class="body info">…</p>
</div>

... and code that is easy to maintain

<!-- It's BEM baby -->

<div class="media user user--premium">
  <img class="media__img user__photo avatar" src="" />
  <p class="media__body user__info">…</p>
</div>

What is wrong with CSS?

• global selectors
• no explicit dependenciеs
• selectors specificity / priority
• complex selectors
• isolation from parent element / cascade
• isolation from global selectors
• code duplication
• removing unused code
• …

BEM Block

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

BEM Element

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

BEM Modifier

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

BEM: The Good Parts

.signup__account__user-name__input { ... }

How to fix block__elem__elem?

BEFORE

<div class="block">
    <div class="block__elem1">
        <div class="block__elem1__elem2"></div>
    </div>
</div>

CSS styles

HTML

CSS

<div class="block">
    <div class="block__element">
    </div>
</div>

.block .block__element {
  ...
}

Wrong CSS styles

HTML

CSS

<div class="block">
    <div class="block__element">
    </div>
</div>

/* bad */
.block .block__element {
  ...
}

/* good */
.block {
  ...
}
.block__element {
  ...
}

Why the modifier CSS classes are not represented as a combined selector?

<div class="block mod">...</div>

or

<div class="block block--mod">...</div>

Avoid Sass' @extend

<div class="menu menu--hidden">...</div>

or

<div class="menu--hidden">...</div>

/* good */
.menu,
.menu--hidden,
.menu--other-modifier {
 // base styles
}

/* better */
.menu {
 // base styles
}
.menu--hidden {...}
.menu--other-modifier {...}

• CSS (clean)

• Descriptive

• Flexibility and consistency  (same styles applied twice for two modifiers)

Can I create a global modifier applicable to any block?

visible, invisible, opacity50 and etc.

CSS
.hidden { display: none }
/* ... */
.block { display: block }

HTML
<div class="block hidden">
    you still see me
</div>

<div class="block mod1 mod2">
    you have no control over the block
</div>

Can I create a global modifier applicable to any block?

.menu {
  @include reset-list;
}

.menu__item {
  @include reset-list-item;
}
...
.list {
  @include reset-list;
}

.list__item {
  @include reset-list-item;
}

How to reuse a button?

<form class="search-form">
  <input type="text" class="input">
  <button type="submit" class="search-form__button button button_theme_lite">
    Search
  </button>
</form>

<form class="auth">
  <input type="text" class="login">
  <input type="password" class="password">
  <button type="submit" class="auth__button button button_theme_dark">
    Sign in
  </button>
</form>

.search-form__button {
    margin: 30px;
}

.auth__button {
    margin: 40px;
}

.button_theme_lite {
    background: #fff;
}

.button_theme_dark {
    background: #000;
}