BEM

BEM is a naming convention for CSS classes in HTML and XML documents. It stands for Block, Element, Modifier.

Block

A block is a standalone entity that is meaningful on its own. While blocks can be nested and interact with each other, semantically they remain equal; there is no precedence or hierarchy. Holistic entities without DOM representation (such as controllers or models) can be blocks as well.

Element

An element is a part of a block that has no standalone meaning and is semantically tied to its block.

Modifier

A modifier is a property of a block or an element that alters its look or behavior.

Example

<header class="header">
 
  <div class="header__logo"></div>
 
  <div class="header__search">
    <input class="header__search__input" />
    <button class="header__search__button header__search__button--active"></button>
  </div>
 
  <div class="header__lang">
    <div class="header__lang__item">
      <a class="header__lang__item__link header__lang__item__link--disabled">EN</a>
    </div>
  </div>
 
</header>

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  background-color: #000;
  color: #fff;
 
  &__logo {
    width: 100px;
    height: 100px;
    background-color: #b02020;
    background-image: url('logo.png');
  }
 
  &__search {
    display: flex;
    background-color: aqua;
    align-items: center;
 
    &__input {
      padding: 1rem;
      font-size: 1.2rem;
      border: none;
      border-radius: 5px;
      outline: none;
    }
  }
 
  &__lang {
    display: flex;
    background: blue;
    align-items: center;
 
    &__item {
      padding: 2rem;
      background-color: #b02020;
 
      &__link {
        background: #abb020;
        font-weight: 900;
        font-size: 1.2rem;
        padding: 1rem;
        text-decoration: none;
 
        &--disabled {
          color: #0087fd;
          cursor: pointer;
        }
      }
    }
  }
}

Fonts Namespaces