What is BEM?

How to use BEM methodology in the project

Block

<!-- Block `header` -->
<header class="header">
    <!-- Included block `logo` -->
    <div class="logo"></div>

    <!-- Included block `search-form` -->
    <form class="search-form"></form>
</header>
.header{}
.logo{}
.search-form{}

Block

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

    <div class="block__elem3"></div>
</div>
.block {
    &__elem1{}
    &__elem2{}
    &__elem3{}
}

Element

<!-- Block `search-form` -->
<form class="search-form">
    <!-- Element `input` in block `search-form` -->
    <input class="search-form__input">

    <!-- Element `button` in block `search-form` -->
    <button class="search-form__button">Search</button>
</form>
.search-form {
    &__input {}
    &__button {}
}

Modifier

<form class="search-form
             search-form_theme_islands
             search-form_theme_lite">

    <input class="search-form__input">

    <button class="search-form__button
                   search-form__button_size_s
                   search-form__button_size_m">
        Search
    </button>
</form>
.search-form {
    &__input {}
    &__button {
        &_size {
        border-radius: 5px;
            &_s {font-size: 16px;}
            &_m {font-size: 16px;}
        }
    }
}

Benefits from BEM

  1. Time - save money for a client!
  2. Scalability
  3. Easy use and standard for  everyone
  4. Ability to create different variations of blocks and elements

Example

Design for Serie, Movies and TV Details

.serie,
.movie,
.tv-details {
  &__content-wrapper {}

  &__content-wrapper,
  &__category {}

 
  &__title {
    @include setFont(('content-load', 'title', 'desktop'));
    margin-top: 10px;

    @include breakpoint($phone) {
      @include setFont(('content-load', 'title', 'mobile'));
    }
  }

  &__media {
    margin: 30px 0;
  }

  &__summary {
    @include setFont(('content-load', 'information', 'desktop'));

    @include breakpoint($phone) {
      @include setFont(('content-load', 'information', 'mobile'));
    }
}

Thank you!

BEM Methodology

By Ivan Berezhnov

Made with Slides.com

BEM Methodology

  • 255

More from Ivan Berezhnov