EN
БЭМ. Блок, Элемент, МодификаторМетодология

Методология

Обычно при вёрстке и программировании сайта разработчики опираются на допущение, что дизайн и технические требования к странице не изменятся в процессе разработки.

Дизайнер, верстальщик и программист работают каждый в своей области, часто не пересекаясь друг с другом:

  1. Дизайнер представляет внешний вид страницы в виде набора макетов;
  2. На основе макетов разрабатывается статическая HTML/CSS-вёрстка;
  3. Программист пишет шаблоны на каком-либо серверном языке и оживляет сайт при помощи JavaScript.

Такой подход рационален лишь в том случае, когда планируется изменять только контент сайта, не затрагивая дизайн.

Обычно же так не происходит: сайт начинает жить своей жизнью и развиваться. Дизайн страниц постепенно меняется, добавляются новые страницы или новые блоки на них.

Если в код сайта не заложена определенная структура, если он написан не по фиксированным правилам, постепенно его становится всё сложнее разрабатывать и поддерживать.

При использовании БЭМ-подхода все разработчики сайта оперируют единым кодом и общаются в одних и тех же терминах, на одном языке:

  1. Дизайн сайта может измениться в любой момент, в зависимости от текущих задач;
  2. HTML/CSS-разметка развивается вместе с дизайном и подготовлена к его изменению;
  3. Программист и верстальщик работают над сайтом, дополняя код друг друга.

Условия появления методологии

БЭМ-методология была разработана в Яндексе для решения следующих задач:

  • Типовые проекты должны разрабатываться быстро, но жить долго. Необходимо уметь за короткий срок создавать проект, архитектура которого позволит без труда поддерживать и развивать его долгие годы.
  • Над проектом работает много людей. Необходимо эффективно организовывать работу команд: как из двух разработчиков, так и из десятков.
  • Масштабируемость команд. Добавление новых людей в команду должно улучшать её производительность. Рациональнее максимально быстро вводить новых разработчиков в курс дела и выделять им собственные зоны ответственности. Чтобы с одним и тем же кодом можно было работать долгое время и разным составом команды, код должен быть хорошо структурирован.
  • Повторное использование кода. Работа над каждым новым проектом или элементом интерфейса не должна начинаться с нуля. Если внутри компании прежде уже выполнялась похожая задача, необходимо максимально эффективно задействовать имеющийся код. У кода не должно быть контекстной зависимости, его должно быть легко переносить из одного места в другое.

Мы искали решение возникающих перед нами проблем, что в какой-то момент привело к формированию методологии БЭМ.

Если вы заметили ошибку или хотите чем-то дополнить статью, вы всегда можете написать об этом, или поправить статью с помощью prose.io.