Использование Bootstrap в методологии BEM (block-element-modifier)

Кратко о методологии BEM (block-element-modifier)

БЭМ (Блок, Элемент, Модификатор) — компонентный подход к веб-разработке. В его основе лежит принцип разделения интерфейса на независимые блоки. Он позволяет легко и быстро разрабатывать интерфейсы любой сложности и повторно использовать существующий код, избегая «Copy-Paste».

https://ru.bem.info/methodology/quick-start/

Подключение "основы" Bootstrap

Позволяет работать с функциями, переменными и миксинами библиотеки Bootsrap в файлах sass и scss.

@import "~bootstrap/scss/functions"; //функции
@import "~bootstrap/scss/variables"; //переменные
@import "~bootstrap/scss/mixins"; //миксины

Основные ошибки при работе с Bootsrap+BEM

Импорт всей библиотеки Bootstrap

@import "bootstrap"

Почему нельзя?

• Таскаем за собой всю библиотеку.
• "Лишний" код в выходном css, не соответствующий BEM.

Импорт одного из компонентов библиотеки Bootstrap в явном виде

@import "bootstrap/bootstrap-grid";

Почему нельзя?

• "Лишний" код в выходном css, не соответствующий BEM.

Работаем над ошибками

Работа с миксинами на примере системы grid

Мы не будем работать с компонентом bootsrap-grid напрямую, вместо будем использовать миксины.

Примеры

Создание контейнера

  @include make-container();

Создание строки

  @include make-row();

Работа с колонками и media

  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(8);
  }

Изучаем исходники компонентов bootsrap

Большинство компонентов bootstrap определены в явном виде.

.navbar {
  position: relative;
  display: flex;
  flex-wrap: wrap; 
  align-items: center;
  justify-content: space-between;
  padding: $navbar-padding-y $navbar-padding-x;

  > .container,
  > .container-fluid {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
  }
}

При импорте всего компонента Boostrap будем получать лишние выходные данные в файле css.
Как избежать лишних данных в файле css при использовании компонента Bootsrap?
Создадим рабочую папку components, в которую будем добавлять файлы компонентов Bootstrap для изменения и последующего наследования (см. подробнее о наследовании).
Рассмотрим на примере _navbar.sccs.
Скопируем в рабочую папку нужный компонент Bootstrap.
После копирования изменим содержание файла _navbar.scss (см. исходный код компонента выше) для работы с наследованием следующим образом:

%navbar {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding: $navbar-padding-y $navbar-padding-x;
}

%navbar-container, %navbar-container-fluid {

   display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}

Мы заменили точки на проценты и вынесли отдельно вложенные элементы. Теперь мы можем импортировать этот класс в файл компонента BEM:

@import "components/navbar";

И описать сам класс блока:

.navbar {
  @extend %navbar;
  &__container {
    @extend %navbar-container;
  }
}

Вывод

Мы рассмотрели основные ошибки, которые допускаются при работе с Bootstrap в методологии BEM, проанализировали основные проблемы (ошибки) и показали способы их разрешения.